美文网首页
ionic-v1中文字不能长按复制的简单解决办法

ionic-v1中文字不能长按复制的简单解决办法

作者: ETXIN | 来源:发表于2017-01-19 17:59 被阅读0次

ionic-v1默认是无法长按选择文字,那么意味着不能实现长按复制。

经过百度跟谷歌的搜索,得出来的解决方法都略麻烦,效果不理想。

整合各方结果,得出来的解决方案如下:

HTML部分

<div data-tap-disabled="true" class="copy">测试文字,长按选中</div>

CSS部分

.copy {
  -webkit-user-select: text !important;
  user-select: text !important;
}

对需要实现长按复制的元素加上 data-tap-disabled 属性,然后再加上 .copy 样式。

这样就可以在ionic中实现长按复制的效果了。

data-tap-disabled 属性是禁用ionic的tap处理机制,user-select: text 是让元素恢复可选择。

ionic默认将所有元素的 user-select 设置为 none,加上 user-select: text 使得元素恢复可选择。
ionic的滚动条是监听tap事件的,必须加上了 data-tap-disabled="true" 使ionic停止监听该元素的tap事件,这样该元素才会触发原生的长按事件。

相关文章

网友评论

      本文标题:ionic-v1中文字不能长按复制的简单解决办法

      本文链接:https://www.haomeiwen.com/subject/ehiibttx.html