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

最新推荐文章于 2024-09-03 10:19:01 发布

cdgogo

最新推荐文章于 2024-09-03 10:19:01 发布

阅读量4.6k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_36699230/article/details/104535577

版权

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

摘要由CSDN通过智能技术生成

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

*{
   
	-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

分享到新浪微博

扫一扫

专栏目录

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

weixin_33410914的博客

06-05

532

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

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

MtangEr的博客

04-02

5705

在页面样式内加入 *{ -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; } ...

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

禁止复制(vue指令)

热门推荐

YaWen的博客

07-18

1万+

最近的项目要求实现一个长按添加关注的功能，后来功能做好了，但是安卓手机长按的时候居然会在周边随便选中文字弹出自带的复制粘贴的操作，后来在网上搜了个样式控制的方法： *{ -webkit-touch-callout:none; /系统默认菜单被禁用/ -webkit-user-select:none; /webkit浏览器/ -moz-user-select:none;/火狐/ -ms-us...

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

weixin_34148340的博客

04-10

130

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

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

12-13

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

vue 简单实现屏蔽移动端复制功能

qq_24010663的专栏

09-11

4167

由于医生提供的资料都比较宝贵，所以要求在移动端不能复制。特地总结一下网上和自己的几个方法。一方法实现 1.第一种覆盖大多数的方法 1 2 3 4 5 6 7 8 9 10 *{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-use...

8个非常实用的Vue自定义指令（面试题）

xiangyizhixuexi的博客

10-15

1264

1、v-copy 需求：实现一键复制文本内容，用于鼠标右键粘贴。思路：动态创建textarea标签，并设置readOnly属性及移出可视区域将要复制的值赋给textarea标签的value属性，并插入到body 选中值textarea并复制将body中插入的textarea移除在第一次调用时绑定事件，在解绑时移除事件 const copy = { bind(el, { value }) { el.$value = value el....

手机h5页面长按复制完整代码

04-28

移动端h5页面长按复制的完整代码，包含安卓和ios，可供学习使用

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

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

03-30

3331

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

移动端禁止缩放三种方式禁止内容选中/复制

Amo℃柠檬

09-02

517

对于常用操作的记录 移动端禁止缩放只需要添加meta信息即可实现。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"> 禁止选中/复制 css方式 * { -moz-user-select: none; -o-user-select:none; -khtml-user-select:none;.

屏蔽长按出现的“复制粘贴”提示

greatwang123的专栏

10-04

1280

用phonegap生成的hybird app，在使用中发现，长按会使选择区域

H5移动端禁止长按弹出系统菜单选择复制

weixin_64310738的博客

02-14

790

H5移动端禁止长按弹出系统菜单选择复制

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

艾欢欢的博客

11-01

4731

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

手机网页取消长按事件

小小黑

09-21

6618

有两种实现方法： 1.如果针对某个特定的div，那么修改样式即可： -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; 2.如果对于整个页面，那么添加如下js代码： window.ontouchstart = function(e) { e.preventDefault(); };

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

04-10

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