如何在 Chrome 浏览器的输入字段中使用只读属性时启用光标移动答案

【问题标题】：How to enable cursor move while using readonly attribute in input field in chrome browser如何在 Chrome 浏览器的输入字段中使用只读属性时启用光标移动
【发布时间】：2013-09-25 21:35:23
【问题描述】：

如何在chrome浏览器的输入字段中使用readonly属性时启用光标移动，与firefox一起工作正常。这是为了观察输入框中不可编辑的完整值。知道这是一个依赖于浏览器的事实功能，还有其他方法可以覆盖吗？

【问题讨论】：

标签： javascript jquery html google-chrome

【解决方案1】：

Chrome 不允许光标在只读文本框中闪烁的一个很好的原因是，闪烁的光标表明用户可以在该控件中键入内容。

因此，如果您想违背该原则，首先值得从用户体验的角度来决定！

如果您真的这样做，您可以通过使用自定义 data- 属性来伪造只读行为，以指定您希望输入为只读，然后忽略任何非导航按键。

var allowedKeys = {
    "37" : "arrow-left",
    "38" : "arrow-up",    
    "39" : "arrow-right",    
    "40" : "arrow-down",
    "9" : "tab",    
    "27" : "esc"        
}

$("input[data-readonly=readonly]").keydown(function(e){
    console.log(e.which);
    if (!allowedKeys[e.which]) {
        e.preventDefault();
    }
});

您可以在此处查看小提琴。 http://jsfiddle.net/BUcC2/1/

如果您的意图是让它成为一个应该以标准方式运行的普通输入控件，我建议不要使用这种方法并坚持浏览器对显示 html 的最佳方式的解释:)

【讨论】：

@Vignesh 是的，这是我的要求
你能指出你提到的可用性原则的一些来源吗？根据我目前的理解，闪烁的光标并不表示可编辑，它表示可以在文本中有意义地移动光标，虽然移动光标的可能原因肯定是编辑，但另一个完全有效的原因是选择。由于 readonly 输入字段确实允许选择（这可能是它们与 disabled 一起存在的主要原因）我认为它们应该显示光标。用户无法更改内容这一事实是由其他 UI 方面呈现的。

【解决方案2】：

这在谷歌浏览器中是不可能的，因为当它是只读的时你不能设置光标在输入字段中移动，但在 IE 和 firefox 中是可能的。

【讨论】：

好点，Safari 也确实显示了光标。如果您将它们设置为只读，VisualBasic 只读文本框和我在 Windows 中能想到的所有文本框也是如此。到目前为止，Chrome 是唯一的地方 - 浏览器或桌面应用程序 - 我曾经看到一个只读输入字段允许选择但不显示光标。我认为它应该被认为是一个错误，因为如果你首先用鼠标选择一个字符，然后通常的 Shift+[方向键] 工作，你可以继续用键盘选择该文本。