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

发布于 2024-12-12 03:32:14 字数 402 浏览 0 评论 0原文

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

<input type="text" readonly />

在 IE 9 和 FF 4 中，当我单击此字段时，该字段中会出现一个（不闪烁的）光标。然而，在 Chrome 中，光标不显示。（请自行查看 http://jsfiddle.net/hqBsW/。）

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

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

有办法做到这一点吗？

原文

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/.)

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.

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.

Is there a way to do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离旧人 2024-12-19 03:32:14

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

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

示例：http://jsfiddle.net/eAZa2/< /a>

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

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

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

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

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

回复收藏 0 原文

遥远的她 2024-12-19 03:32:14

听起来像一个错误！

Mozilla 中存在类似的错误 (396542)，它表示光标 < em>应该在只读输入中闪烁 - 但这种行为感觉不对，闪烁的光标应该意味着“你可以在这里输入”。

您应该对该错误发表评论并/或提交新错误（通过 Mozilla 此处和 Microsoft 此处）！

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

回复收藏 0 原文

伪装你 2024-12-19 03:32:14

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

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

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

另一种选择是当用户关注给定的输入元素时，您可以强制进行文本选择。控制行为的这种变化将更容易地向用户提示输入受到限制的事实，并且如果这是最终用例，则允许他们非常轻松地进行复制。

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

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

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

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.

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/

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:

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

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

回复收藏 0 原文

情泪▽动烟 2024-12-19 03:32:14

对于仅 CSS 修复，请使用：

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

For a CSS only fix, use :

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

回复收藏 0 原文

栀子花开つ 2024-12-19 03:32:14

可以使用 html 和 javascript 完成

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

，也可以使用 jQuery 全局完成

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

It can be done using html and javascript

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

or globally using jQuery

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

回复收藏 0 原文

灯角 2024-12-19 03:32:14

您可以使用 css：

input {pointer-events:none;}

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

You can use css:

input {pointer-events:none;}

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

回复收藏 0 原文

吃不饱 2024-12-19 03:32:14

我找到的唯一方法是

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

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

回复收藏 0 原文

陌路终见情 2024-12-19 03:32:14

您可以设置标记的 style 属性，也可以通过设置 class 属性的值将 css 类添加到标记中。您的问题可以通过设置光标来解决。您可以在此处了解更多信息。另外，如果您有一些设置此标签光标的规则，您可以将 !important 添加到您的 css 规则中。您可以在此处了解有关 !important 的更多信息。

回复收藏 0 原文

~没有更多了~