HTML: 只读输入文本框中如何显示光标？

Question

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

<input type="text" readonly />

在IE 9和FF 4中，当我点击这个字段时，字段中会出现一个(不闪烁的)光标。然而，在Chrome中，光标没有显示。(您可以在http://jsfiddle.net/hqBsW/上自行查看。)

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

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

有没有办法做到这一点？

- user979672

---

我也遇到了同样的问题，但我找到了解决方法。为该输入字段编写 pointer-events: none; CSS 属性。 - Shrirang Kadale

请查看此链接：https://stackoverflow.com/questions/45738397/hide-text-field-blinking-cursor-in-ie-or-even-change-blinking-cursor-color-to-wh/51328027#51328027 - Shrirang Kadale

Answer 1

我的解决方案是基于nikmd23的jQuery代码片段，但加入了看起来更好用的blur()函数。

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

这里有一个示例：http://jsfiddle.net/eAZa2/

不要使用属性“disabled”，因为当其作为表单的一部分时，输入将无法提交。

- Frank

---

我想知道readonly的使用方式是否重要：http://jsfiddle.net/m7saqqpL/ 看起来好像没有什么区别。 - surfmuggle

是的，它们看起来很相似，因为两个字段都不可编辑（另一个小区别是文本的颜色，在禁用字段上它是深灰色的，但这可能取决于浏览器）。主要区别在于当您将表单提交到服务器时，具有属性“disabled”的输入根本不会被提交，而“readonly”输入则会被提交。 - Frank

onfocus="this.blur()" 在IE11中似乎无法正常工作。 - DivineOps

当动态更改“readonly”属性时，请使用：$（'input'）.focus（function（）{if（$（this）.is（'[readonly]'））this.blur（）}）; - T. Christiansen

Answer 2

听起来像是一个bug！

在Mozilla上有一个类似的bug（396542），说光标应该在readonly输入框中闪烁，但这种行为感觉不对，闪烁的光标应该意味着“你可以在这里输入”。

你应该在那个bug下面进行评论和/或提交新的bug（在Mozilla 这里 和在Microsoft 这里）！

同时，使用disabled或者像@nikmd23建议的那样使用JavaScript来改变行为似乎是最好的解决方法。

- s4y

---

关于禁用字段的一点说明是，禁用的字段在表单提交时不会被发送到服务器。 - contactmatt

关于上面的评论 - 当然有一个肮脏的技巧，就是在表单中放置一个隐藏且禁用的元素。 - Brent

禁用只读列表框/组合框中的字段并不理想。因此，您需要只读状态而无需禁用它。请参阅http://w3c.github.io/aria/#listbox和http://w3c.github.io/aria/#combobox。 - seangates

为该输入框编写 pointer-events: none; CSS 属性。 - Shrirang Kadale

Answer 3

如果你将readonly 属性改为 disabled，则无法点击输入框，也就无法出现光标。根据浏览器的不同，你可能也无法选择文本。

这里提供了各种输入状态的示例：http://jsfiddle.net/hqBsW/1/ 另一种选择是在用户聚焦于给定的输入元素时强制进行文本选择。这种控件行为的变化更容易让用户知道输入受到限制，并允许他们轻松复制，如果这是最终的用例的话。

使用 jQuery，你可以像这样编写选择代码：

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

我已更新示例以展示此行为的实际效果：http://jsfiddle.net/hqBsW/2/。

- nikmd23

---

有时候你需要使用 readonly 属性而不是 disabled。在 HTML5 中，你无法验证被禁用的字段，但是你可以验证只读字段。 - thecoolmacdude

Answer 4

使用只有 CSS 的修复方法，请使用：

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

- Mohammed Erraysy

Answer 5

使用html和javascript可以实现此操作。

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

或者使用jQuery进行全局设置

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

- Kld

Answer 6

我找到的唯一方法是：

//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');

- alecellis1985

Answer 7

你可以使用 css:

input {pointer-events:none;}

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

- Laxman Paikaray

---

欢迎来到SO。回答问题时，请提供与您的代码相关的解释。有些人可能不理解您的代码，或者不知道它如何回答问题。请参阅如何撰写好答案。 - Nuageux

Answer 8

您可以设置标签的style属性，或者通过设置class属性的值来添加css类到标签中。您可以通过设置光标来解决您的问题。您可以在这里阅读更多信息。此外，如果您有一些规则来设置此标签的光标，您可以在css规则中添加!important。您可以在这里阅读更多关于!important的信息。

- Lajos Arpad

---

问题是在询问文本光标，而不是鼠标光标。 - nikmd23