javascript - 文本框的 CSS 文本选择覆盖

Question

我的布局如下:

HTML

<div class="Non-Select">
  <div>Title</div>
  <div><input name="title" type="textbox" /></div>
</div>

CSS:

Non-Select {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}

我希望能够覆盖 Non-Select 类，以便我可以在文本框中选择文本。

如有任何建议，我们将不胜感激。

Answer 1

要使文本不可选择，需要了解有两种 方法。如果我们需要版本 10 之前的 Opera 和 Internet Explorer(在大多数情况下是肯定的))) - 我们需要使用值为 on 的 unselectable 属性.

这里需要注意的重要一点是，如果我们将此属性设置为 parent 包装器 - .Non-Select 在这种情况下 - 子元素的文本仍然可以被选中-打开this fiddle在 Opera 或 IE 中最多检查 9 个。因此，我们需要将此属性添加到不应选择的每个单个元素(如果有许多(或未知数量)可能的子元素，则可能通过 javascript 动态添加)。

要禁用其他浏览器的选择，我们可以使用 css3 user-select属性(property)。添加此 css 的一种很酷的方法是通过 attribute selector ，如下所示:

[unselectable="on"]{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

因此 - 在大多数流行的浏览器中都无法选择具有此属性的任何元素上的文本。

第二种方式更短。如果我们不需要 IE 或 Opera - 您的代码必须进行少量更改才能在 Firefox、Chrome 和 IE10 中运行。

.Non-Select {
    -webkit-user-select: none;
    -khtml-user-select: none; 
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none; 
}
.Non-Select input {
    -webkit-user-select: text;
    -khtml-user-select: text; 
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text; 
}

注意我添加的非标准 -moz-none 值。如果我们仔细阅读 this property on MDN我们将看到 Mozilla 引入了这个非标准版本以允许选择子元素。可以在此处看到第二种方法的实例:- http://jsfiddle.net/jxnEb/5/

编辑 已经有a similar question on selection .请注意已接受的答案，其中作者编写了一个函数以递归方式将 unselectable 属性添加到所有子元素。 (在你的情况下 - input 当然应该被过滤)。