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

Question

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

Answer 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的最佳方式的解释：）

Answer 2

使用Google Chrome无法实现，因为当它是只读时，您无法将光标设置为在输入字段中移动，但在IE和Firefox中则可以。