Html 从聚焦的只读输入中删除文本插入符号/指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5443952/
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
Remove text caret/pointer from focused readonly input
提问by Wesley Murch
I am using an <input readonly="readonly">, styled as normal text to remove the appearance of an interactive field, but still display the value.
我使用<input readonly="readonly">, 样式为普通文本来删除交互式字段的外观，但仍显示该值。
This is very useful to prevent a user from editing a field, while still being able to post the value. I realize this is a convenience method and that there are several workarounds, but I want to use this method.
这对于防止用户编辑字段同时仍然能够发布值非常有用。我意识到这是一种方便的方法，并且有多种解决方法，但我想使用这种方法。
Problem:The blinking caret still appears when the field is clicked/focused. (At least in FF and IE8 on Win7)
问题：单击/聚焦该字段时仍会出现闪烁的插入符号。（至少在 Win7 上的 FF 和 IE8 中）
Ideally, I would like it to behave as it normally does, focusable, but without the blinking caret.
理想情况下，我希望它表现得像往常一样，可聚焦，但没有闪烁的插入符号。
Javascript solutions welcome.
欢迎使用 Javascript 解决方案。
回答by n3on
On mine there is no caret or so:
在我的没有插入符号左右：
<input type="text" value="test" readonly="readonly" >
Take a look at this: http://www.cs.tut.fi/~jkorpela/forms/readonly.html
看看这个：http: //www.cs.tut.fi/~jkorpela/forms/readonly.html
Sorry, now I understand your problem.
抱歉，现在我明白你的问题了。
Try this:
尝试这个：
<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
回答by Headache
You can use this in your css, but it will not focus:
你可以在你的 css 中使用它，但它不会聚焦：
[readonly='readonly'] {
pointer-events: none;
}
回答by Muhammad Husein
回答by Kld
It can be done using html and javascript
它可以使用 html 和 javascript 完成
<input type="text" onfocus="this.blur()" readonly >
or jQuery
或 jQuery
$(document).on('focus', 'input[readonly]', function () {
this.blur();
});
回答by andora
The onfocus/blur method works ok to remove the cursor from a readonly field, but the browser does not automatically refocus on the next field, and you may lose focus altogether, which is not what the user usually expects. So, if this is required, you can use plain javascript to focus on the next field you want, but you have to specify the next field:
onfocus/blur 方法可以从只读字段中移除光标，但浏览器不会自动重新聚焦到下一个字段，您可能会完全失去焦点，这不是用户通常所期望的。因此，如果这是必需的，您可以使用普通的 javascript 专注于您想要的下一个字段，但您必须指定下一个字段：
<input type="text" name="readonly-field" value="read-only"
readonly onfocus="this.form.NextField.focus()">
Where 'NextField' is the name of the field to goto. (Alternatively, you could provide some other means to locate the next field). Obviously, this is more involved if you want to navigate to some non-visible UI element, like a tab-panel, as you will need to arrange this as well.
其中“NextField”是要转到的字段的名称。（或者，您可以提供一些其他方法来定位下一个字段）。显然，如果您想导航到一些不可见的 UI 元素（如选项卡面板），这会更复杂，因为您也需要安排它。
回答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 Tusko Trush
Easy!
简单！
Just add disabledto input and it will not be clickable (focused)
只需添加disabled到输入中，它就无法点击（聚焦）
