用户选择：无导致 Safari 上无法访问输入字段

Posted 2023-02-19

【中文标题】用户选择：无导致 Safari 上无法访问输入字段

【英文标题】：User select:none causes input field to be inaccessible on Safari

【发布时间】：2012-06-04 21:09:49

【问题描述】：

使用这些 css 样式，我可以防止在页面上选择突出显示的文本。但这会导致输入字段被 Safari 上的用户输入锁定。

* 
-webkit-touch-callout: none;
-webkit-user-select: none; // locks fields on Safari
-khtml-user-select: none; // locks fields on Safari
-moz-user-select: none;
-ms-user-select: none;
user-select: none;      

Safari 有没有办法在不干扰输入字段的情况下防止用户选择？

【参考方案1】：

为什么不将样式应用于除输入之外的所有内容？

css3 方式： *:not(input)...

【讨论】：

不要忘记文本区域：*:not(input textarea)...

@tomaspolach 您的语法不正确。正确的语法是：*:not(input):not(textarea)

【参考方案2】：

没什么新鲜的:)

*:not(input, textarea)
    -webkit-touch-callout: none;
    -webkit-user-select: none; // locks fields on Safari
    -khtml-user-select: none; // locks fields on Safari
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

【参考方案3】：

对于 css 中的每种情况：

*:not(input), *:focus:not(input) 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline-style:none;/*IE*/

【参考方案4】：

我需要一些更精确的东西。

input[type=text] 

  -webkit-user-select: text;


input[type=password]

  -webkit-user-select: all;

【讨论】：

在功能方面有什么区别？抱歉，我知道我可以试试，只是真的很忙……

这将只选择类型属性设置为文本或密码的特定输入元素。这是不支持not 的旧浏览器所必需的。但是，我会这样做：* ... user-select: none; input ... user-select: text;