显示在只读输入文本中的光标?

Let's say we have a textbox that's readonly, like so:

假设我们有一个只读的文本框，比如:

<input type="text" readonly />

In IE 9 and FF 4, when I click on this field, a (non-blinking) cursor appears in the field. In Chrome, however, the cursor does not show. (See for yourself at http://jsfiddle.net/hqBsW/.)

在IE 9和FF 4中，当我单击该字段时，一个(不闪烁的)游标出现在该字段中。但是在Chrome中，光标没有显示。(参见http://jsfiddle.net/hqBsW/)

I suppose I understand why IE/FF opt to show the cursor—so the user knows he or she can still select the value in the field.

我想我理解为什么IE/FF选择显示指针——这样用户就知道他或她仍然可以在字段中选择值。

Nonetheless, it's evidently confusing our users and we would like to change IE/FF to not show the cursor, as Chrome does for readonly fields.

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

Is there a way to do this?

有办法吗?

8 个解决方案

#1

Sounds like a bug!

听起来像一个错误!

There is a similar bug (396542) open with Mozilla, saying that the cursor should blink in readonly inputs — but that behavior feels wrong, a blinking cursor is supposed to mean, “you can type here.”

Mozilla打开了一个类似的bug(396542)，它说光标应该在只读输入中闪烁——但是这种行为感觉不对，闪烁光标应该是“你可以在这里输入”。

You should comment on that bug and/or file new ones (with Mozilla here and with Microsoft here)!

您应该对这个bug进行评论并/或文件更新(这里有Mozilla，这里有微软)!

In the meantime, using disabled or changing the behavior with JavaScript, as @nikmd23 suggested, seems like the best workaround.

与此同时，使用禁用或改变JavaScript行为(如@nikmd23所示)似乎是最好的解决方案。

#2

My solution, from nikmd23's jQuery snippet but with the blur() function that seems to work better

我的解决方案，来自nikmd23的jQuery代码片段，但是使用模糊()函数，它看起来效果更好。

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

Example here: http://jsfiddle.net/eAZa2/

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

Don't use the attribute "disabled" because the input would not be submitted when it is part of a form

不要使用“禁用”属性，因为输入是表单的一部分时不会提交

#3

If you change the readonly attribute to disabled, you won't be able to click into the input box and thus won't have a cursor.

如果您将readonly属性更改为禁用，您将无法单击输入框，因此不会有游标。

Depending on the browser, you may not be able to select the text either though.

但是，根据浏览器的不同，您可能也不能选择文本。

I've provided examples of the various input states here: http://jsfiddle.net/hqBsW/1/

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

Another alternative is you could force a text selection when the user focuses on a given input element. This change in control behavior would more easily clue the user into the fact that input is restricted, and allows them to copy very easily if that is the end use case.

另一种选择是，当用户集中于给定的输入元素时，可以强制选择文本。控制行为的这一变化将更容易地提示用户输入是受限制的，并允许用户很容易地复制(如果这是最终的用例)。

Using jQuery you would write the selection code like this:

使用jQuery，您可以编写如下的选择代码:

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

I've updated the example to show this behavior in action: http://jsfiddle.net/hqBsW/2/

我已经更新了这个示例，以显示实际的行为:http://jsfiddle.net/hqBsW/2/

#4

It can be done using html and javascript

它可以使用html和javascript完成

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

or globally using jQuery

使用jQuery或全球

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

#5

the only way i found for this was

我找到的唯一办法是

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

#6

For a CSS only fix, use :

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

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

#7

-1

You can use css:

你可以使用css:

input {pointer-events:none;}

Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

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

#8

-2

You can set the style attribute of your tag or you can add a css class to your tag by setting the class attribute's value. Your problem can be solved by setting the cursor. You can read more here. Also, if you have some rules which set the cursor of this tag you can add !important to your css rule. You can read more about !important here.

可以设置标记的样式属性，也可以通过设置类属性的值向标记添加css类。您的问题可以通过设置游标来解决。你可以在这里读到更多。此外，如果您有一些规则可以设置此标记的游标，您可以添加!你可以阅读更多关于!这里很重要。

#1