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

How to enable cursor move while using readonly attribute in input field in chrome browser

本文关键字：只读属性 启用 移动 光标 输入 chrome 浏览器 字段      更新时间：2023-09-26

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

Chrome 不允许光标在只读文本框中闪烁，这是有充分理由的，这是因为闪烁的光标表示用户可以键入该控件。

因此，首先，如果您想

违背该原则，则值得从UX的角度做出决定！

如果您真的这样做，则可以通过使用自定义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 :)的最佳方式的解释

谷歌浏览器是不可能的，因为您无法将光标设置为在输入字段中移动，因为它是只读的，但在IE和Firefox中这是可能的。

相关文章：