Html 在 <input> 中使用 readonly 属性而不改变光标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17319228/
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
Use readonly attribute in <input> without changing the cursor
提问by Premshankar Tiwari
If I have an <input>field with the readonlyattribute, it still appears with the I-beam text cursor. Is there a way to stop that cursor from showing?
如果我有一个<input>具有该readonly属性的字段，它仍会与工字钢文本光标一起出现。有没有办法阻止该光标显示？
I cant use the disabledattribute because request.getParameter()does not work on disabled fields.
我无法使用该disabled属性，因为request.getParameter()它不适用于禁用字段。
采纳答案by Sohail Anwar
Try this markup in your form for text field
在您的文本字段表单中尝试使用此标记
<input type="text" value="test" onfocus="this.blur()" readonly="readonly" />
<input type="text" value="test" onfocus="this.blur()" readonly="readonly" />
main thing which helps you hide the cursor is onfocus="this.blur()".
帮助您隐藏光标的主要内容是 onfocus="this.blur()"。
回答by Olly Hodgson
The idea of readonlyelements is that you can still read and copy the text, just not edit them. That said, you can change the cursor using CSS attribute selectors. This example will match any inputelement with a readonlyattribute:
readonly元素的想法是你仍然可以阅读和复制文本，只是不能编辑它们。也就是说，您可以使用CSS 属性选择器更改光标。此示例将匹配input具有readonly属性的任何元素：
input[readonly] {
cursor: pointer;
}
回答by totas
I did not want to override bootstrap's default styles so I came along with the following solution:
我不想覆盖引导程序的默认样式，所以我提出了以下解决方案：
My LESS File:
我的 LESS 文件：
input[readonly] {
&.default-cursor {
cursor: default;
}
}
Or in CSS:
或者在 CSS 中：
input[readonly].default-cursor {
cursor: default;
}
My HTML:
我的 HTML：
<input type="text" class="form-control text-xl default-cursor" readonly>
回答by Buzinas
For people who don't want to have the caret showing at all:
对于根本不想显示插入符号的人：
input[readonly] {
pointer-events: none;
}
