0

我的布局如下：

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 类，以便我可以在文本框中选择文本。

任何建议将不胜感激。

4

4 回答 4

2

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

这里需要注意的是，如果我们将此属性设置为父包装器 -.Non-Select在这种情况下 - 仍然可以选择子元素的文本 - 在歌剧或 IE 中打开这个小提琴，最多 9 进行检查。因此，我们需要将此属性添加到每个不应选择的元素（如果有许多（或未知数量）可能的子元素，则可能通过 javascript 动态添加）。

要禁用其他浏览器的选择，我们可以使用 css3user-select属性。添加这个 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我添加的非标准值。如果我们仔细阅读MDN 上的这个属性，我们会看到 Mozilla 引入了这个非标准版本来启用子元素的选择。第二种方法的一个活生生的例子可以在这里看到： - http://jsfiddle.net/jxnEb/5/

编辑：关于 selection也有类似的问题。请注意接受的答案，其中作者编写了一个函数以unselectable递归方式将属性添加到所有子元素。（在你的情况下 -input当然应该被过滤）。

于 2012-08-09T09:11:47.160 回答
1

您可以覆盖非选择中输入的默认行为。

.Non-Select{
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}
.Non-Select input{
  user-select: text; 
  -khtml-user-select: text; 
  -moz-user-select: text;
}
于 2012-08-09T08:05:31.543 回答
0

使用这个 CSS

.Non-Select input {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}
于 2012-08-09T07:46:02.003 回答
0

只需像这样修改您的CSS：

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

您忘记了班级名称前的一个点。

这足以达到预期的结果。

于 2012-08-09T08:06:11.243 回答