移动端禁止/阻止/取消长按进行复制粘贴的操作

最近的项目要求实现一个长按添加关注的功能，后来功能做好了，但是安卓手机长按的时候居然会在周边随便选中文字弹出自带的复制粘贴的操作，后来在网上搜了个样式控制的方法：

*{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}

以为ok啦，结果项目一上线，业务方提出ios手机有问题啦，所有的输入框自动失去焦点无法输入内容，后来经过查找，发现了一个问题，是因为 -webkit-user-select:none; 这个属性造成的，然后在同一个css文件中加个样式就解决了：

input , textarea{-webkit-user-select:auto;
}

其实后来在测试过程中发现ios手机还是有问题，最后无奈，我只能在页面上判断当前手机是安卓还是ios然后，调用不同的css文件，在安卓手机调用的css文件里加入以下样式就可以了

*{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}

移动端禁止/阻止/取消长按进行复制粘贴的操作相关推荐

移动端禁止图片/文字长按默认行为
移动端 app内 ios系统会出现长按某个图标会出现大图展示以及调出控制面板,这样的话用户体验不好,不像是原生的页面,下面提供遇到这个问题后解决的方法,亲测有效: img {-webkit-touch ...
html5屏蔽ios长按复制,html5+CSS 实现禁止IOS长按复制粘贴功能
html5+CSS 实现禁止IOS长按复制粘贴功能因为在移动端APP需要实现长按执行别的事件,但是在iOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法. ...
html页面禁止右键、禁止复制、禁止图片拖动、禁止复制和剪切禁止IOS长按复制粘贴实现
html实现页面禁止右键禁止复制禁止图片拖动禁止复制和剪切众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键禁止复制. 禁止右键oncontex ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
手机端 html5 按长按保存图片尺寸,html5移动端禁止长按图片保存的实现
在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片.那该如何实现呢?下面给出3种解决方案. 方案一:使用 pointer-events: ...
android h5 禁止缩放,vue h5移动端禁止缩放代码
vue h5移动端禁止缩放代码安卓在index.html里面写 ios 在APP.vue里面写 window.onload = function() { document.addEventList ...
文本超出多行显示省略号移动端禁止双击缩放
文本超出两行显示省略号移动端禁止双击缩放单行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行省略 displ ...
苹果端手机微信页面长按图片无法保存的解决方案
苹果端手机微信页面长按图片无法保存的解决方案参考文章: (1)苹果端手机微信页面长按图片无法保存的解决方案 (2)http://www.cnblogs.com/xiaofengju/p/580748 ...
web网页端禁止开发者模式
web网页端禁止开发者模式监听 window.addEventListener('devtoolschange', function(e) {if (e.detail.open) console.c ...

移动端禁止/阻止/取消长按进行复制粘贴的操作

移动端禁止/阻止/取消长按进行复制粘贴的操作相关推荐

最新文章

热门文章