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

最新推荐文章于 2024-04-16 14:54:49 发布

原创

最新推荐文章于 2024-04-16 14:54:49 发布 · 4.8k 阅读

3 ·

CC 4.0 BY-SA版权

在项目中，为了实现长按删除、关注等特定功能，需要阻止移动端设备的长按行为，以防止用户意外触发系统自带的复制粘贴菜单。针对iOS设备上长按导致输入框失去焦点的问题，可以通过添加特定样式来解决，实现移动端页面禁止用户放大缩小的功能。

项目中长按删除、长按添加关注等功能是很常见的。但是手机端长按默认是会在周边随便选中文字弹出自带的复制粘贴的操作，所以我们需要禁止掉移动端长按进行复制粘贴的操作。（可以防止内容被复制）

*{
   
   
	-webkit-touch-callout:none; /系统默认菜单被禁用/
	-webkit-user-select:none; /webkit浏览器/
	-moz-user-select:none;/火狐/
	-ms-user-select:none; /IE10/
	user-select:none;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cdgogo

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【软件开发规范七】《Android UI设计规范》

商务合作|问题讨论|交流学习请联系作者微信，加微信请务必注明来意，博客主页有联系方式

07-18

3466

Android UI设计规范

HTML5对手机页面长按会粘贴复制禁用的解决方法

12-13

解决方法如下所示：直接在CSS 文件中添加下面的代码，就可以实现了在手机端禁止粘贴复制的功能： XML/HTML Code复制内容到剪贴板 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:non

参与评论您还未登录，请先登录后发表或查看评论

html5+CSS 实现禁止IOS长按复制粘贴功能

08-31

因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料，下面小编给大家分享解决方案，一起看看吧

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

最新发布

lys20000913的博客

04-16

1459

【代码】【移动端】解决移动端H5 IOS安卓长按弹出拷贝/复制（关闭浏览器的默认长按机制）

移动端手机页面禁用/阻止长按进行复制粘贴选择的操作

MtangEr的博客

04-02

5869

在页面样式内加入 *{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -khtml-user-select:none; /早期浏览器/ -moz-user-select:none;/火狐/ -ms-user-select:none; /IE10/ user-select:none; } ...

移动端禁用长按复制

https://github.com/blingbling-110

08-09

733

添加全局禁止选择文本的CSS属性 * { -webkit-touch-callout: none; /* 系统默认菜单 */ -webkit-user-select: none; /* webkit浏览器 */ /*noinspection CssUnknownProperty*/ -khtml-user-select: none; /* 早期浏览器 */ -moz-user-select: none; /* 火狐浏览器 */ -ms-user-select:

移动端禁止长按复制

m0_37653407的博客

05-12

723

*{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -moz-user-select:none;/火狐/ -ms-user-select:none; /IE10/ user-select:none; } // iOS中会出现输入框自动失去焦点无法输入内容的问题，所以要将输入框设置为auto input, textarea { -webkit-touch-callout: auto

移动端（pc）禁止长按拷贝

张井乙ccccyc的博客

02-17

5540

网页在手机上浏览时通常会碰到一个问题，就是不小心触摸时间过长就出现自带的拷贝等按键了，造成了不好的体验，下面就教你解决办法。web端，只需在css中加入代码就可以了*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-

移动端长按复制功能禁用或启用css控制

beyond520lin的博客

11-15

1415

有时候需要复制功能时，代码如下：user-select: auto;在需要的地方class或style 加上：user-select: none;有时的页面不想让用户长按后复制内容，一行代码搞定。

html5屏蔽ios长按复制,html5+CSS 实现禁止IOS长按复制粘贴功能

weixin_33410914的博客

06-05

658

html5+CSS 实现禁止IOS长按复制粘贴功能因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴，禁止此功能在网上找了很多资料，最终整理出目前最好的解决方法。项目是APP，已经经过多款手机适配此时，因此可以放心使用。/*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:aut...

移动端禁止长按选择

xjun0812的博客

06-04

1980

简单粗暴： *{user-select:none;-webkit-user-select:none;}

移动端H5页面禁止长按复制和去掉点击时高亮

weixin_34148340的博客

04-10

160

/*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-use...

移动端h5页面禁止长按选择复制

艾欢欢的博客

11-01

5149

注意：增加之后需要对input做另外设置，不然输入框无法输入 ios手机默认可以长按选择复制，如不想长按选择，可以用以下代码取消： *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/...

移动端 h5 vue 长按出来复制,怎么取消

唯一的切慕，唯一的诗歌……

03-30

3422

template <div @touchstart="subtouchStart($event,index)" >长按</div> script subtouchStart(event,index){ event.preventDefault(); } event.preventDefault(); 取消事件的默认动作。 ...

移动端禁止页面复制文字

liudanyang_21的博客

07-03

940

有时候操作H5页面需要长按某个按钮的时候，会出现浏览器系统自带的复制功能很烦，怎么解决呢，只需要加入以下样式。 body { -webkit-touch-callout: none; /*系统默认菜单被禁用*/ -webkit-user-select: none; /*webkit浏览器*/ -khtml-user-select: none; /*早起浏览器*/ -moz-user-select: none; /*火狐浏览器*/ -ms-user-select:...

如何在移动端web端禁止长按选择文字以及弹出菜单

itclanCoder

10-01

4439

在做移动端页面时,当用户用手机打开网站,当在上面用手指进行一些用户操作时如果没有做任何处理,当用户点击屏幕,且有长按的动作时,屏幕会弹出一菜单,以及选中的效果,这个是非常不好的体验,那怎么禁用呢，用css几行代码就可以解决/*如果是禁用长按选择文字功能，用css*/ *{ -webkit-touch-callout:none; -webkit-...

移动端禁止/取消长按粘贴的操作

04-10

回答: 长按粘贴操作可以通过以下方式取消： 1. 在 input 标签中添加 readonly 属性，禁止文本框中的内容被修改。 2. 在 input 标签中添加 onpaste 事件并返回 false，阻止默认粘贴行为。 3. 在 input 标签中添加 ...