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

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常用插件——日期选择 效果图如下: 4、js中的代码: ion-scroll 设置了隐藏横向滚动条无效 ...
    大巴纯爷们阅读 1,759评论 1 3
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,779评论 18 399
  • 恋爱这两个字很遥远 好像天上的云 遥不可及 或许谈过吧 不确定 记忆中是有那么一段吧 现在不知道在哪个疙瘩了 不说...
    安逝如风阅读 210评论 3 0
  • 请看具体实现,注释详细. 觉得用的上的朋友麻烦点个赞.自己写的实用小工具.使用的时候直接继承自BaseModel ...
    Aaronn阅读 1,570评论 9 5
  • 云家三人在饭桌上吃着饭。 云烈从盘里夹起绿而油亮的青菜放到碗里,吃的津津有味。 云山细嚼慢咽着,不忘了喝上一口汤,...
    谢沛霖阅读 271评论 0 1