javascript 禁用 textarea 中的文本选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19138669/
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
Disable text selection in textarea
提问by Bram W.
I need to find a way to prevent users from selecting text in a textarea. The goal is to create a custom keyboard that is used to enter text in the textarea. I want users to be able to click on the textarea to set the caret position (which is already working right now). However, I don't want the users to be able to select certain parts of the inserted text, or there should at least be no visual indication of this. I have already tried a few things, such as the following CSS, but without success.
我需要找到一种方法来防止用户在 textarea 中选择文本。目标是创建一个自定义键盘，用于在 textarea 中输入文本。我希望用户能够点击 textarea 来设置插入符号位置（现在已经可以使用了）。但是，我不希望用户能够选择插入文本的某些部分，或者至少应该没有视觉指示。我已经尝试了一些东西，比如下面的 CSS，但没有成功。
textarea {
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
The solution can be in CSS and/or JavaScript, and it only has to work in Google Chrome. Thanks!
解决方案可以是 CSS 和/或 JavaScript，并且它只需要在谷歌浏览器中工作。谢谢！
UPDATE:
更新：
Disabling the textarea will not work for me. As I mentioned, I want users to be able to place the caret at certain positions by clicking on the location. If I would disable the textarea, this functionality would be lost.
禁用 textarea 对我不起作用。正如我提到的，我希望用户能够通过单击位置将插入符号放置在特定位置。如果我禁用 textarea，则此功能将丢失。
@OPUS: That solution doesn't work with textareas. @andi: that's right @Pointy: keyboard events can be blocked. Users don't have to enter text with their keyboard, but with a custom keyboard that I offer on the page. Compare it with an on-screen keyboard. @downvoters: What's so bad about this question?
@OPUS：该解决方案不适用于 textareas。@andi：没错@Pointy：可以阻止键盘事件。用户不必使用键盘输入文本，而是使用我在页面上提供的自定义键盘。将其与屏幕键盘进行比较。@downvoters：这个问题有什么不好？
回答by Martin Zeitler
A combination of the "readonly" property and "user-select" property works.
“只读”属性和“用户选择”属性的组合有效。
The 2nd rule disables the highlighted border on select, which is a kind of visual selection.
第二条规则禁用选择时突出显示的边框，这是一种视觉选择。
The "unselectable" property seems to be Opera/IE specific.
“不可选择”属性似乎是特定于 Opera/IE 的。
the styles:
样式：
.noselect {
cursor: default;
-webkit-user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
.noselect:focus {
outline: none;
}
the markup:
标记：
<textarea class="noselect" readonly="readonly" unselectable="on"></textarea>
read-only might be more suitable than disabled (one can still toggle with JS, upon click event).
只读可能比禁用更适合（仍然可以在单击事件时使用 JS 进行切换）。
回答by HIRA THAKUR
<textarea unselectable="on" id="my_textarea"></textarea>
*.unselectable {
-webkit-user-select: none;
}
回答by Vinutha N
Below code can help you
下面的代码可以帮助你
JS Code:
JS代码：
$(document).ready(function(){
$('#txtInput').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
回答by silvadori
Or you can just put disabled="disabled" in textarea, like this :
或者您可以将 disabled="disabled" 放在 textarea 中，如下所示：
<textarea disabled="disabled"></textarea>
<textarea disabled="disabled"></textarea>
回答by Mike H.
You can disable it with javascript:
您可以使用 javascript 禁用它：
document.getElementById("textarea").disable='true';
回答by Ankur Dhanuka
<textarea disabled="readonly"></textarea>
tested it is working.
测试它正在工作。
