纯 CSS 解决方案：

Question

我试图阻止在输入字段上进行选择，但需要考虑以下因素

使用鼠标阻止选择
使用键盘阻止选择（包括Ctrl + A，shift +箭头）
允许使用键盘和鼠标聚焦到现场

到目前为止，我已尝试过这些事情：

CSS

我尝试过使用以下课程

.unselectable {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

结果：仍然可以选择

我也在下面尝试过但没有成功：

$("#my_field").attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', 
           '-webkit-user-select':'none',
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

的Javascript

我尝试了下面的

$( "#my_field" ).select(function(e) {
        console.log("Select called");
        e.preventDefault();
});

结果：控制台打印了消息，但是选择仍然有效

感谢您的帮助

Answer 1

可以通过在select事件上将元素的selectionStart设置为selectionEnd来完成：

var inp = document.getElementById('my_input');

inp.addEventListener('select', function() {
  this.selectionStart = this.selectionEnd;
}, false);

<input id="my_input" type="text" value="Try to select me!" />

Answer 2

您可以阻止mousedown事件，以防止在input内部选择文本。

<input type="text" id="unselectable" value="You can not select this text!"/>
<script>
document.getElementById("unselectable").addEventListener("mousedown", function(event){
  event.preventDefault();
});
</script>

Answer 3

纯 CSS 解决方案：

这将不允许输入文本视觉显示为选中状态。
在某些情况下，这种技术已经足够好了，如果开发人员不关心输入的文本是否能够被复制粘贴，但只有选择的视觉方面是不需要的。

input{ color:transparent }
input::selection{ color:transparent }

<input value='invisible selection'>

Answer 4

您可以使用绝对位置的任何图层覆盖<input>，例如使用div.wrapper::after或其他包装标签。然后使用user-select: none作为包装标签（<div>，<label>等），不要在user-select: none本身上使用<input>。

但是如果您的包装标签是<label>，我建议另外为readonly添加属性<input>并将<label>转换为块（或inline-block / flex / inline-flex）。

input { outline: none; margin: 10px 0; width: 200px; }

.wrapper {
  position: relative;
  user-select: none;
}

.wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

label.wrapper { display: block; }

<div class="wrapper">
  <input type="text" value="Any text in the div wrapper"/>
</div>

<label class="wrapper">
  <input type="text" value="Any text in the label wrapper" readonly />
</label>

Answer 5

它应该在div中工作！

#my_field {
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}

防止在输入文本字段上选择

5 个答案:

纯 CSS 解决方案：