HTML5：在移动端禁用长按选中文本功能

最新推荐文章于 2024-08-09 14:38:03 发布

zxphwz

最新推荐文章于 2024-08-09 14:38:03 发布

阅读量833

点赞数

本文探讨了在手机浏览器中长按文本选择功能可能带来的不适感，并提出了禁用此功能以优化用户体验的建议。通过CSS样式设置，可以实现对不同浏览器的兼容性调整，确保网页在各种设备上的良好表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在手机浏览器中，长按可选中文本，但如果在应用中，会给人一种异样的感觉，最好还是禁用此功能为上。

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zxphwz

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

lys20000913的博客

04-16

1307

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

移动端h5文字长按复制_详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案...

weixin_39621794的博客

12-21

2592

最近需要给HTML5的WebAPP在页面上实现一个复制功能：用户点击长按文本会全选文字并弹出系统“复制”菜单，用户可以点击“复制”进行复制操作，然后粘贴到AppStore搜索对应的应用。之所以不是采用链接形式直接跳转到AppStore对应应用是为了通过用户的主动输入关键词搜索给推广的企业App增加权重。所以这一个“复制”功能对用户的体验至关重要。尝试了一些做法，在安卓/iOS平台上的兼容性都不是很...

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

HTML5[5]：在移动端禁用长按选中文本功能

weixin_30734435的博客

02-03

469

在手机浏览器中，长按可选中文本，但如果在应用中，会给人一种异样的感觉，最好还是禁用此功能为上。 * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}...

[html] H5怎么禁用长按复制的功能？

歌谣的博客

04-02

1768

[html] H5怎么禁用长按复制的功能？ // 禁止长按图片保存，设置img样式 -webkit-touch-callout: none; pointer-events: none; // 微信浏览器无法禁止，需加上这句 // 禁止长按选择文字 -webkit-user-select: none; // 禁止长按呼出菜单 -webkit-touch-callout: none; 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关

内嵌h5，禁止长按图片保存、选个文本等事件

qingzhen的博客

04-14

1352

禁止长按图片弹出菜单

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

艾欢欢的博客

11-01

5054

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

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

08-31

总的来说，通过结合使用`-webkit-touch-callout`和`-webkit-user-select`属性，我们可以有效地在iOS上禁用长按复制粘贴功能，同时保留`input`和`textarea`的正常交互性。这种方法已经在多个项目中得到了验证，能够...

移动端使用luckysheet长按触发不了右键功能

最新发布

06-20

如何在移动端禁用长按选中文字？2.如何用JavaScript监听移动端的长按事件？3.Luckysheet在移动端有哪些已知的限制？4.如何修改Luckysheet源码以支持移动端长按触发右键菜单？</think>### Luckysheet 移动端长按触发...

vue2的手机H5项目，如何实现长按全选当前文本，

06-01

引用[3]是关于禁用长按选中，但用户的需求相反，需要启用或主动触发全选。所以可能需要移除那些user-select:none的样式，或者动态控制样式。现在，用户的问题是长按全选文本。在移动端H5中，通常长按输入框内的...

禁用 H5 网页长按图片时弹出的菜单

03-22

好的，我现在要解决的问题是如何在H5网页中禁用长按图片时弹出的默认菜单。用户提到他们想通过代码实现这一点，所以我要先回忆一下相关的技术点。首先，我记得在HTML中，图片元素是使用标签的。当用户长按图片时，...

H5怎么禁用长按复制的功能？

github_39427902的博客

03-01

1665

H5怎么禁用长按复制的功能？

移动端 css 禁止长按屏幕选中

weixin_30500473的博客

09-20

1431

*{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } 转载于:ht...

html禁止文本被选中（多浏览器兼容）

sk19969306105的博客

09-08

286

user-select: none;

Android中webview显示HTML长按选择时无法显示选中文字

u011411094的专栏

07-15

1807

##部分笔记在Android-wiz阅度时无法复制 ###现象：普通笔记：在阅度界面长安时可以看到选择文字段(高亮显示)，可以任意改动范围特殊笔记：在阅度界面长安时不能看到选择文字段(无高亮显示)，不能任意改动范围 ###原因：笔记内容中存在一个固定位置的div，该div引用了一段CSS；其中存在属性：position: fixed

记一次WEB、移动端（安卓、IOS）h5页面禁止禁用复制、选中

Tany的博客

01-04

5204

记一次WEB、移动端（安卓、IOS）h5页面禁止禁用复制、选中背景初次上线寻求解决方案背景由于本人工作单位性质问题（新闻单位），元旦期间接到领导紧急要求将一篇文章禁止选中和复制，当我拿到需求的时候，原以为是很简单的几个件事处理即可解决问题，虽然本屌一直从事后端工作，但也觉得这种事情不在话下，随口答应1小时后即可上线。当我说出这句话的时候，就很明显，事情没有这么简单。具体情况下如：初次上线我认为这种需求，简单的找个博客复制粘贴即可解决问题，紧急处理一篇文章嘛，领导也说了直接把ID写死即可，后期再安排

移动端H5不能自由选中文本进行复制的问题

博哥的二进制世界

03-15

2973

在写微信公众号H5的时候，发现在移动端上，H5没办法自由选中文本进行文字复制。这实际上是由于微信浏览器和其他的移动端浏览器默认给元素添加了属性造成的。既然知道是这个原因造成的，那么我们通过修改属性即可解决问题user-select有none、auto、text、contain、all、inherit、initial、unset8个属性//不可选中 user-select : auto;//自动 user-select : text;//文本可选中 user-select : contain;

H5移动端重写长按选中复制功能

sunmeng0109的博客

08-09

1249

这样，那个弹窗就不出来了，但是选中状态也没有了，只能重写，那只能进行重写文字复制功能，监听触摸事件，模拟长按。利用 document["caretRangeFromPoint"](x, y) 根据触摸的点位置，设置选中range，设置手柄的位置，监听手柄的移动事件，重新设置选中，根据选区，微调手柄位置，使手柄不能放在文字上。现在的需求是，用户长按文字，选中文字，可划选改变选中，出现搜索按钮，点击搜索按钮，页面进入搜索。在平板浏览器里，长按选中状态后，出现复制搜索菜单，是浏览器的默认行为。

html禁止长按弹出右键,HTML页面内容禁止选择、复制、右键、禁用移动端长按a标签弹窗...

weixin_31510505的博客

05-31

603

iphone长按a标签弹窗禁用；给a标签设置css：-webkit-touch-callout:none;ondragstart='return false' onselectstart ='return false'onselect='document.selection.empty()' oncopy='document.selection.empty()'onbeforecopy='re...