javascript 防止选择输入文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29221991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent select on input text field
提问by user2636664
I am trying to prevent selection on an input field with the following considerations
我试图阻止在输入字段上进行选择，原因如下
- Prevent selection using mouse
- Prevent selection using keyboard (including Ctrl+A, shift+arrows)
- Allow focusing into field using keyboard and mouse
- 防止使用鼠标选择
- 防止使用键盘选择（包括 Ctrl+A、shift+箭头）
- 允许使用键盘和鼠标聚焦到现场
So far I have tried these things:
到目前为止，我已经尝试过这些事情：
CSS
CSS
I have attempted the using the following class
我已经尝试使用以下课程
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Result: selection still possible
结果：仍然可以选择
I have also tried below with no success:
我也在下面尝试过，但没有成功：
$("#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
Javascript
I tried the below
我尝试了以下
$( "#my_field" ).select(function(e) {
console.log("Select called");
e.preventDefault();
});
Result: console printed the message, however the select still works
结果：控制台打印了消息，但是选择仍然有效
Thanks for your help
谢谢你的帮助
采纳答案by Hashem Qolami
It can be done by setting the element's selectionStartto selectionEndon selectevent:
可以通过将元素设置selectionStart为selectionEndonselect事件来完成：
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!" />回答by hev1
You can prevent the mousedownevent to prevent the selection of the text inside the input.
您可以阻止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>回答by kanstudio
You can cover over the <input>with any layer in absolute position, for example with div.wrapper::afteror with other wrapper tag. Then use user-select: nonefor the wrapper tag (<div>, <label>, etc) and don't use user-select: noneon the <input>itself.
您可以<input>使用绝对位置的任何图层覆盖，例如使用div.wrapper::after或使用其他包装标签。然后user-select: none用于包装标签（<div>、<label>等），不要用于user-select: none其<input>本身。
But if your wrapper tag is <label>I recommend additionally adding the attribute readonlyfor the <input>and converting <label>to the block (or inline-block / flex / inline-flex).
但是，如果您的包装标签是<label>我建议另外加属性readonly的<input>，并转换<label>到该块（或内联块/柔性/直列-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>