webkit-user-select:none 问题

最新推荐文章于 2021-12-28 15:10:48 发布
最新推荐文章于 2021-12-28 15:10:48 发布
阅读量3.9k 收藏 4
点赞数 1
文章标签： 前端 移动开发 ViewUI
本文探讨了WebKit内核浏览器下-webkit-user-select:none;导致的移动端input无法输入的问题，介绍了该问题的背景及解决方案，参考了WebKit官方bug报告。

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

webkit-user-select:none 问题

学习了：https://bugs.webkit.org/show_bug.cgi?id=82692

最近两天做移动端游戏举报页面。遇到一个问题，移动端的input都不能输入了，后来发现可能是
－webkit－user-select ：none ;
在移动端开发中，我们有时有针对性的写一些特殊的重置，比如：
＊ {
      -webkit - touch - callout: none;
    //-webkit-touch-callout:none; 阻止长按图片之后呼出菜单提示复制的行为

  //禁用Webkit内核浏览器的文字大小调整功能。
    -webkit-text-size-adjust: none;
  //避免点击a标签或者注册了click事件的元素时产生高亮
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  //
    //禁止用户进行复制.选择.
    -webkit-user-select: none;
}其中，－webkit－user-select ：none ；会产生一些问题。
这是webkit内核浏览器下的一个bug，具体可以参考这篇文章：https://bugs.webkit.org/show_bug.cgi?id=82692

 

CSS `user-select: none`：控制用户文本选择行为
weixin_41455464的博客
07-02 511
有时候，你可能需要自定义一些拖拽或交互元素。这些元素通常需要通过JavaScript来实现交互逻辑，而不是通过浏览器默认的文本选择功能。因此，可以禁止选中这些元素上的文字，避免干扰交互效果。
CSS中-webkit-user-select:none的用途
weixin_42391053的博客
05-16 8639
CSS中-webkit-user-select:none; 的用途 出现了选中文字后无法拖拽盒子的bug 本人用js写当鼠标拖拽让一个盒子位置随鼠标位置改动时，遇到了一个bug 效果图如下： bug如下： bug描述：当鼠标选中文字后，拖动盒子，但是松开时盒子还是跟着动，这样达不到松开盒子不动的目的 废话不多说，直接上代码： JS代码 <script type="text/javascript"> var box = document.getElementById('box');
-webkit-user-select: none;导致的移动端input=text 无法输入
GUK
11-08 2143
解决办法： * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; } *:not(input,textarea)...
-WEBKIT-USER-SELECT:NONE导致输入框无法输入
weixin_34304013的博客
11-21 287
2019独角兽企业重金招聘Python工程师标准>>> ...
user-select:none；
qq_40703860的博客
12-28 7866
css控制页面文字不能被选中user-select:none; 现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。 原因：鼠标点快了文字会被选中。 解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。 body{ -moz-user-select:none;/火狐/ -webkit-user-select:none;/webkit浏览
移动端-webkit-user-select:none导致input/textarea输入框无法输入
allWords的博客
11-13 2676
移动端-webkit-user-select:none导致input/textarea输入框无法输入
css 让文字不被选中之-moz-user-select 属性介绍
09-25
为了实现跨浏览器兼容性，你可能还需要使用其他前缀，如 `-webkit-user-select`（针对 WebKit/Safari/Chrome）和 `-ms-user-select`（针对 Internet Explorer）。 在某些情况下，即使设置了 `-moz-user-select: ...
-moz-user-select与onselectstart 禁止选择文字的方法
09-25
然而，Chrome和其他基于WebKit的浏览器并不支持`onselectstart`事件，因此在这种情况下，仅使用CSS的`-webkit-user-select: none;`是必要的： ```css element { -webkit-user-select: none; } ``` 需要注意的是，...
<cbi-form-item prop="lanip" label="<%:IPv4 address%>"> <cbi-input :value.sync="form.lanip" maxlength="15" :disabled="CheckWorkMode" :class="{ 'blurred-unselectable': CheckWorkMode }" ></cbi-input> </cbi-form-item> 其中 .blurred-unselectable { filter: blur(3px); /* 虚化效果，数值越大虚化程度越高 */ user-select: none; /* 禁止文本选中 */ -webkit-user-select: none; /* 兼容 Safari */ -moz-user-select: none; /* 兼容 Firefox */ -ms-user-select: none; /* 兼容 IE/Edge */ } 代码中的 :class="{ 'blurred-unselectable': CheckWorkMode }"是实现什么的？
最新发布
07-10
user-select: none; /* 禁止文本选中 */ /* 可能还有其他样式，比如降低透明度等 */ } ``` 最后，生成相关问题： 1. Vue.js中如何绑定多个条件类？ 2. 除了对象语法，Vue.js还有哪些类绑定方式？ 3. 如何...
-webkit-user-select:none应用场景
baodi4637的博客
05-25 545
我们做的a标签安钮情况时，如果重复快速的安时，就会像上图那样在安钮旁边出现“搜索、复制”和一些页面变蓝的背景，这个时侯看着非常不爽，之前一直不知道是什么原因，也没有怎么去管。后面才查到有一个CSS3的属性可以禁止这样的事情发生，不管怎么快速重复的去安，也不会出现上图那样的情况。只要在a标签上加上-webkit-user-select: none;就可以，这个属性是禁止用户进行复制的。...
禁用手机浏览器的用户选择功能 -webkit-user-select: none;
weixin_33700350的博客
12-05 526
2019独角兽企业重金招聘Python工程师标准>>> ...
-webkit-user-select
weixin_30352645的博客
03-23 908
-webkit-user-select: none;//不可选 -webkit-user-select: auto; //可复制 转载于:https://www.cnblogs.com/silentjesse/p/4360043.html
移动端 -webkit-user-select:text; ios10 bug 解决方案
weixin_30569153的博客
02-23 1156
移动端一般body的css、会设置 作用就不解释了； body{ height:100%;min-height:100%; font-family: "微软雅黑",'Helvetica Neue',Helvetica,tahoma,arial,sans-serif; text-rendering:optimizeLegibility;-webkit-font-smoothing:antial...
移动端 -webkit-user-select:text； ios10 bug 解决方案
w36680130的博客
01-02 503
移动端 -webkit-user-select:text; ios10 bug 解决方案
一行css让页面上的文字不能选中
JackieDYH的博客
09-30 600
user-select：none | text 取值： text: 可以选择文本 默认值 none: 文本不能被选择 适用于：除替换元素外的所有元素 设置或检索是否允许用户选中文本 IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性； 直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselecta...
user-select: none;
03-10
<think>好的，用户想了解CSS中user-select: none的使用方法和兼容性问题。首先我需要回忆相关知识，确保信息准确。 首先，user-select属性用于控制用户能否选中文本。主要的值包括none（不可选）、text（可选文本）、all（点击即可选中所有内容）等。但要注意，这个属性不是W3C标准，所以不同浏览器的支持情况不同，需要加前缀。 接下来是使用方法。基本用法应该是给元素添加user-select: none;，但为了兼容不同浏览器，可能需要加上-webkit-、-moz-、-ms-等前缀。例如，-webkit-user-select: none; 适用于Chrome和Safari，-moz-user-select: none; 用于Firefox，而-ms-user-select: none; 用于旧版Edge。同时，可能还需要处理IE浏览器的兼容，比如使用onselectstart属性或者unselectable属性。 然后要考虑兼容性问题。比如在IE6-9中，不支持user-select，但可以用onselectstart="return false;"。Opera旧版本可能需要unselectable="on"。此外，在部分浏览器中，即使设置了user-select: none，用户如果从其他区域开始选择，仍然可能选中该区域的文本，这点需要提醒用户注意。 另外，用户提到的引用中提到了不同浏览器的处理方式，需要整合这些信息。例如，引用[2]提到IE6-9使用onselectstart，Safari和Chrome也支持这个属性，而Opera使用unselectable。同时，引用[4]指出需要针对不同浏览器调整设置，所以代码示例中应该包含各个前缀和备用方案。 可能还需要提到常见的应用场景，比如防止文本被选中拖拽，避免复制内容，或者在UI组件中提升体验。但也要注意，过度使用可能影响用户体验，比如无法复制有用的信息。 最后，生成相关问题时要围绕user-select的扩展，比如其他相关属性pointer-events，如何解决拖拽问题，或者移动端的适配等。 检查是否有遗漏点，比如代码示例的正确性，是否覆盖所有主流浏览器，以及注意事项是否全面。确保回答结构清晰，分点说明，并引用提供的参考资料。</think>### CSS中`user-select: none;`使用方法及兼容性问题解析 #### 1. **基本用法** `user-select: none;`用于禁止用户选中页面中的文本内容，常用于UI组件优化或防止内容被复制。 **核心语法**： ```css .target-element { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ user-select: none; /* 标准语法 */ } ``` #### 2. **兼容性处理** - **IE6-9**：不支持`user-select`，需通过标签属性实现： ```html <div onselectstart="return false;">不可选文本</div> ``` - **Opera ≤12.5**：需使用私有属性`unselectable="on"`： ```html <div unselectable="on">不可选文本</div> ``` - **Safari/Chrome**：支持`onselectstart`属性，但推荐使用`-webkit-user-select: none;`[^3]。 #### 3. **注意事项** - **部分浏览器限制**：即使设置`-ms-user-select: none;`，用户若从其他区域开始选择，仍可能选中目标文本[^2]。 - **移动端适配**：需添加`-webkit-touch-callout: none;`禁止长按菜单。 - **脚本控制**：通过JavaScript设置`userSelect`属性： ```javascript element.style.userSelect = 'none'; // 标准 element.style.webkitUserSelect = 'none'; // WebKit ``` #### 4. **典型应用场景** - 防止拖拽操作误触发文本选中（如自定义滑块组件）[^1]。 - 禁止复制页面敏感内容。 - 优化交互体验（如按钮连续点击时避免选中文本）。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值