Question

我想禁止用户通过css选择输入控件的内容。我试图将以下属性添加到控件：

 #editContainer
  {    
     user-select: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
  }

<div id='editContainer'>
    <input id='daysInput' />
     <span id='daysString'></span>
     <input id='hoursInput' />
     <span>:</span>
     <input id='minuteInput' />
</div>

但它不起作用......

如何阻止用户选择控件内容？

Answer 1

您需要添加以下内容：

-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select:none;
 user-select:none;' 
 unselectable='on'  
onselectstart='return false;'  
onmousedown='return false;'

例如：

<input  style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'  unselectable='on'  onselectstart='return false;'  onmousedown='return false;' id='daysInput' />

Answer 2

对于文本输入字段，如果它们被聚焦（即打开以进行编辑）

，则无法执行此操作

它只适用于attr。禁用= “禁用”

<div id='editContainer'>
    <input id='daysInput' disabled="disabled" value="Test"/>
     <span id='daysString'></span>
     <input id='hoursInput'  disabled="disabled" value="Test"/>
     <span>:</span>
     <input id='minuteInput'  disabled="disabled" value="Test"/>
</div>

查看此示例 http://jsfiddle.net/ce7st2ms/7/

Answer 3

我认为你不会为此找到一个好的解决方案。

我看到的唯一（JavaScript）方式是使用多个元素并定位绝对。如果输入，顶部元素（div或您喜欢的任何其他元素）应具有相同的大小。此元素可能会阻止选择。

如果您需要输入一些数据到输入字段，您可以暂时隐藏此元素并在输入完成后返回。

CSS禁用输入控件内容的选择

3 个答案: