HTML:光标显示在只读输入文本中？

Question

假设我们有一个只读的文本框,如下所示:

<input type="text" readonly />

在IE 9和FF 4中,当我单击此字段时,字段中会出现(非闪烁)光标.但是,在Chrome中,光标不会显示.(请参阅http://jsfiddle.net/hqBsW/.)

我想我明白为什么IE/FF选择显示光标 - 所以用户知道他或她仍然可以选择字段中的值.

尽管如此,它显然让我们的用户感到困惑,我们希望将IE/FF更改为不显示光标,就像Chrome为readonly字段所做的那样.

有没有办法做到这一点？

Answer 1

我的解决方案,来自nikmd23的jQuery片段,但是blur()函数看起来效果更好

$('input[readonly]').focus(function(){
    this.blur();
});

示例:http://jsfiddle.net/eAZa2/

不要使用"已禁用"属性,因为当输入是表单的一部分时,不会提交输入

Answer 2

如果将readonly属性更改为disabled,则无法单击输入框,因此将无法使用光标.

根据浏览器的不同,您可能无法选择文本.

我在这里提供了各种输入状态的示例:http://jsfiddle.net/hqBsW/1/

另一种方法是,当用户关注给定的输入元素时,您可以强制选择文本.控制行为的这种改变将更容易使用户知道输入受到限制的事实,并且如果这是最终用例,则允许他们非常容易地复制.

使用jQuery,您可以像这样编写选择代码:

$('input[readonly]').focus(function(){
    this.select();
});

我已经更新了示例以显示此行为:http://jsfiddle.net/hqBsW/2/

Answer 3

听起来像个臭虫!

有一个类似的错误(396542)与Mozilla打开,说光标应该在readonly输入中闪烁- 但这种行为感觉不对,闪烁的光标应该意味着,"你可以在这里输入."

你应该对错误意见和/或(和Mozilla提交新的位置,并与微软在这里)!

与此同时,disabled正如@ n​​ikmd23建议的那样,使用或改变JavaScript的行为似乎是最好的解决方法.

Answer 4

对于CSS唯一的修复，请使用：

input[readonly] {
  pointer-events: none;
}

Answer 5

可以使用html和javascript完成

<input type="text" onfocus="this.blur()" readonly >

或在全球范围内使用jQuery

$(document).on('focus', 'input[readonly]', function () {
        this.blur();
    });