Javascript 在chrome浏览器的输入字段中使用readonly属性时如何启用光标移动
如何在chrome浏览器的输入字段中使用readonly属性时启用光标移动,与firefox配合良好。这是为了观察输入框中不可编辑的完整值。知道这是一项依赖于浏览器的功能,还有其他方法可以覆盖吗?Chrome不允许光标在只读文本框中闪烁,这是因为闪烁的光标表示用户可以键入该控件 因此,首先,如果你想违背这一原则,从用户体验的角度来决定是否值得 如果您真的这样做了,您可以通过使用自定义的Javascript 在chrome浏览器的输入字段中使用readonly属性时如何启用光标移动,javascript,jquery,html,google-chrome,Javascript,Jquery,Html,Google Chrome,如何在chrome浏览器的输入字段中使用readonly属性时启用光标移动,与firefox配合良好。这是为了观察输入框中不可编辑的完整值。知道这是一项依赖于浏览器的功能,还有其他方法可以覆盖吗?Chrome不允许光标在只读文本框中闪烁,这是因为闪烁的光标表示用户可以键入该控件 因此,首先,如果你想违背这一原则,从用户体验的角度来决定是否值得 如果您真的这样做了,您可以通过使用自定义的data-属性来指定您希望输入为只读,然后忽略任何非导航按键来伪造只读行为 var allowedKeys =
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();
}
});
你可以看看这里的小提琴
如果你想让它成为一个正常的输入控件,应该以标准的方式运行,我建议不要使用这种方法,并坚持浏览器对显示html的最佳方式的解释:)Google chrome不可能,因为当输入字段为只读时,你不能将光标设置为在输入字段中移动,但是在IE和firefox中这是可能的。@Vignesh是的,这是我的要求。你能指出一些你提到的可用性原则的来源吗?根据我目前的理解,闪烁的光标并不表示可编辑性,它表示可以在文本中有意义地移动光标,而移动光标的一个可能原因当然是编辑,另一个完全有效的原因是选择。由于只读输入字段确实允许选择(这可能是它们与禁用字段共存的主要原因),我认为它们应该显示光标。用户无法更改内容这一事实是由其他UI方面呈现的。这一点很好,而且Safari确实显示了光标。VisualBasic只读文本框也是如此,如果您将它们设置为只读,我可以在Windows中想到的所有文本框也是如此。到目前为止,Chrome是浏览器或桌面应用程序中唯一一个允许选择但不显示光标的只读输入字段。我认为这应该被认为是一个错误,因为如果你首先用鼠标选择一个字符,然后通常的Shift+[方向键]工作,你可以继续用键盘选择该文本。