javascript 以完全只读的方式转换 HTML 文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6883482/
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
Convert HTML textbox in complete readonly
提问by Rohit Sharma
Requirements: Make textfields readonly - not disabled , user shouldnt be able to click on the field even once (more or less textfield should behave like select box). Also user when presses tab should be able to move to next field(normal behavior) Internet Explorer should be the browser for rendering the code.
要求：使文本字段只读 - 未禁用，用户甚至不能点击该字段一次（或多或少文本字段应该像选择框一样）。此外，用户按下选项卡时应该能够移动到下一个字段（正常行为） Internet Explorer 应该是用于呈现代码的浏览器。
Sample code which I have been doing is here
我一直在做的示例代码在这里
<table>
<tr>
<td><input type="text" value="test1" onfocus="this.blur()" readonly="true" /></td>
</tr>
<tr>
<td><input type="text" value="test2" onfocus="this.blur()" readonly="true" /></td>
</tr>
<tr>
<td><input type="text" value="test3" onfocus="this.blur()" readonly="true" /></td>
</tr>
</table>
The problems with the above code are 1. User is able to click once (blinking cursor is visible) 2. On pressing Tab - user doesn't move to next field.
上述代码的问题是 1. 用户可以单击一次（闪烁的光标可见） 2. 按 Tab - 用户不会移动到下一个字段。
Again only for IE. Thanks
再次仅适用于 IE。谢谢
回答by karllindmark
To address the tabbing issues, you'll probably need to add tabindexto the inputs:
要解决制表问题，您可能需要添加tabindex到输入中：
<input type="text" value="test1" onfocus="this.blur()" readonly="readonly" tabindex="1"/>
<input type="text" value="test2" onfocus="this.blur()" readonly="readonly" tabindex="2"/>
<input type="text" value="test3" onfocus="this.blur()" readonly="readonly" tabindex="3"/>
回答by Pascal MARTIN
I would say that if you need something that's readonly, and must not behave like a form element, then, you should not use a form element : just use the value as a text :
我想说的是，如果您需要只读的东西，并且不能像表单元素那样表现，那么，您不应该使用表单元素：只需将值用作文本：
<tr>
<td>test1</td>
</tr>
This way :
这条路 ：
- It doesn't behave like a form element,
- No-one will think one should be able to modify it
- 它的行为不像表单元素，
- 没有人会认为应该能够修改它
If necessary, you can then use a bit of CSS to style it, with a border, for example...
如有必要，您可以使用一些 CSS 对其进行样式设置，例如带有边框...
回答by Dennis
This will let you tab into each textbox, but they won't let you click on them. Use the onclick event to blur it and set the readonly attribute to prevent editing.
这会让你进入每个文本框，但他们不会让你点击它们。使用 onclick 事件对其进行模糊处理，并设置 readonly 属性以防止编辑。
回答by Lingasamy Sakthivel
You can use disabled. It solves the tab index issue
您可以使用disabled. 它解决了标签索引问题
<input type="text" disabled="disabled" />
