HTML：光标显示在只读输入文本中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7917592/
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
HTML: cursor showing in readonly input text?
提问by user979672
Let's say we have a textbox that's readonly, like so:
假设我们有一个只读的文本框，如下所示：
<input type="text" readonly />
In IE 9 and FF 4, when I click on this field, a (non-blinking) cursor appears in the field. In Chrome, however, the cursor does not show. (See for yourself at http://jsfiddle.net/hqBsW/.)
在 IE 9 和 FF 4 中，当我单击此字段时，该字段中会出现一个（非闪烁）光标。但是，在 Chrome 中，光标不显示。（在http://jsfiddle.net/hqBsW/ 上亲自查看。）
I suppose I understand why IE/FF opt to show the cursor—so the user knows he or she can still select the value in the field.
我想我明白为什么 IE/FF 选择显示光标——这样用户就知道他或她仍然可以选择字段中的值。
Nonetheless, it's evidently confusing our users and we would like to change IE/FF to not show the cursor, as Chrome does for readonlyfields.
尽管如此，这显然让我们的用户感到困惑，我们希望将 IE/FF 更改为不显示光标，就像 Chrome 对readonly字段所做的那样。
Is there a way to do this?
有没有办法做到这一点？
采纳答案by s4y
Sounds like a bug!
听起来像个错误！
There is a similar bug (396542)open with Mozilla, saying that the cursor shouldblink?in readonlyinputs — but that behavior feels wrong, a blinking cursor is supposed to mean, “you can type here.”
Mozilla有一个类似的错误 (396542)，说光标应该在readonly输入中闪烁——但这种行为感觉不对，闪烁的光标应该意味着“你可以在这里输入”。
You should comment on that bug and/or file new ones (with Mozilla hereand with Microsoft here)!
你应该对错误和/或文件新的评论（和Mozilla在这里，并与微软在这里）！
In the meantime, using disabledor changing the behavior with JavaScript, as @nikmd23 suggested, seems like the best workaround.
与此同时，disabled正如@nikmd23 所建议的那样，使用或更改 JavaScript 的行为似乎是最好的解决方法。
回答by Frank
My solution, from nikmd23's jQuery snippet but with the blur() function that seems to work better
我的解决方案，来自 nikmd23 的 jQuery 代码片段，但带有似乎更好用的 blur() 函数
$('input[readonly]').focus(function(){
this.blur();
});
Example here: http://jsfiddle.net/eAZa2/
这里的例子：http://jsfiddle.net/eAZa2/
Don't use the attribute "disabled" because the input would not be submitted when it is part of a form
不要使用“禁用”属性，因为当输入是表单的一部分时，它不会被提交
回答by nikmd23
If you change the readonlyattribute to disabled, you won't be able to click into the input box and thus won't have a cursor.
如果您将readonly属性更改为disabled，您将无法点击输入框，因此不会有光标。
Depending on the browser, you may not be able to select the text either though.
根据浏览器的不同，您也可能无法选择文本。
I've provided examples of the various input states here: http://jsfiddle.net/hqBsW/1/
我在这里提供了各种输入状态的示例：http: //jsfiddle.net/hqBsW/1/
Another alternative is you could force a text selection when the user focuses on a given input element. This change in control behavior would more easily clue the user into the fact that input is restricted, and allows them to copy very easily if that is the end use case.
另一种选择是当用户关注给定的输入元素时，您可以强制选择文本。控制行为的这种变化将更容易让用户意识到输入受到限制，并且如果这是最终用例，则允许他们非常容易地复制。
Using jQuery you would write the selection code like this:
使用 jQuery，您可以像这样编写选择代码：
$('input[readonly]').focus(function(){
this.select();
});
I've updated the example to show this behavior in action: http://jsfiddle.net/hqBsW/2/
我已经更新了示例以显示这种行为：http: //jsfiddle.net/hqBsW/2/
回答by Kld
It can be done using html and javascript
它可以使用 html 和 javascript 完成
<input type="text" onfocus="this.blur()" readonly >
or globally using jQuery
或全局使用 jQuery
$(document).on('focus', 'input[readonly]', function () {
this.blur();
});
回答by Mohammed Erraysy
For a CSSonly fix, use :
对于CSS唯一的修复，请使用：
input[readonly] {
pointer-events: none;
}
回答by alecellis1985
the only way i found for this was
我为此找到的唯一方法是
//FIREFOX
$('INPUT_SELECTOR').focus(function () {
$(this).blur();
});
//INTERNET EXPLORER
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
$(this).blur();
});
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');
回答by Laxman Paikaray
You can use css:
您可以使用css：
input {pointer-events:none;}
Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events
参考：https: //developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events
回答by Lajos Arpad
You can set the style attribute of your tag or you can add a css class to your tag by setting the class attribute's value. Your problem can be solved by setting the cursor. You can read more here. Also, if you have some rules which set the cursor of this tag you can add !important to your css rule. You can read more about !important here.
您可以设置标签的 style 属性，也可以通过设置 class 属性的值将 css 类添加到您的标签中。您的问题可以通过设置光标来解决。您可以在此处阅读更多内容。此外，如果您有一些设置此标签光标的规则，您可以将 !important 添加到您的 css 规则中。您可以在此处阅读有关 !important 的更多信息。
