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

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

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

但是，如果您的包装标签是 <label>，我建议另外为 <input> 添加属性 readonly 并将 <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 4

纯 CSS 解决方案：

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

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

<input value='invisible selection'>