Question

假设我们有一个只读的文本框，如下：

<input type="text" readonly />

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

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

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

有办法做到这一点吗？

Answer 1

我的解决方案，来自nikmd23的jQuery代码片段，但模糊（）函数似乎效果更好

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

Example here: 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

听起来像个臭虫！

有a similar bug (396542)与Mozilla打开，说光标应该在readonly输入中闪烁 - 但这种行为感觉不对，闪烁的光标应该意味着，“你可以在这里打字。“

您应该评论该错误和/或提交新错误（使用Mozilla here和Microsoft here）！

与此同时，使用disabled或使用JavaScript更改行为，正如@ nikmd23建议的那样，似乎是最好的解决方法。

Answer 4

可以使用html和javascript

完成

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

或全局使用jQuery

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

Answer 5

我找到的唯一方法是

//FIREFOX
$('INPUT_SELECTOR').focus(function () {
                $(this).blur();
            });
//INTERNET EXPLORER
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
                $(this).blur();
            });
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');

Answer 6

对于仅CSS的修复程序，请使用：

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

Answer 7

您可以使用css：

input {pointer-events:none;}

参考：https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

Answer 8

您可以设置标记的样式属性，也可以通过设置class属性的值为标记添加css类。您可以通过设置光标来解决问题。您可以阅读更多here。此外，如果您有一些规则来设置此标记的光标，您可以添加！important对您的css规则。您可以阅读更多关于！important here。

的信息

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

8 个答案: