当前位置：文江博客话题详情

从聚焦的只读输入中删除文本插入符号/指针

发布于 2024-10-27 13:11:44 字数 299 浏览 5 评论 0原文

我正在使用（样式为普通文本）来删除交互式字段的外观，但仍显示该值。

这对于防止用户编辑字段非常有用，同时仍然能够发布值。我意识到这是一种方便的方法，并且有多种解决方法，但我想使用这种方法。

问题：当单击/聚焦字段时，闪烁的插入符号仍然出现。（至少在 Win7 上的 FF 和 IE8 中）

理想情况下，我希望它像平常一样运行，可聚焦，但没有闪烁的插入符号。

欢迎使用 JavaScript 解决方案。

原文

分享到QQ

分享到微博

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

发布评论

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

秋日私语 2024-11-03 13:11:44

在我的上没有插入符号左右：

<input type="text" value="test" readonly="readonly" >

看看这个：http://www.cs。 tut.fi/~jkorpela/forms/readonly.html

抱歉，现在我明白你的问题了。

试试这个：

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

On mine there is no caret or so:

<input type="text" value="test" readonly="readonly" >

Take a look at this: http://www.cs.tut.fi/~jkorpela/forms/readonly.html

Sorry, now I understand your problem.

Try this:

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

回复收藏 0 原文

愚人国度 2024-11-03 13:11:44

您可以在 css 中使用它，但它不会聚焦：

[readonly='readonly'] {
   pointer-events: none;
}

You can use this in your css, but it will not focus:

[readonly='readonly'] {
   pointer-events: none;
}

回复收藏 0 原文

安静被遗忘 2024-11-03 13:11:44

您可以通过将 css 属性指定为 transparent 来删除闪烁的插入符，

caret-color: transparent;

您可以测试结果此处

You can remove the blinking caret by specify the css attribute into transparent

caret-color: transparent;

you can test the result here

回复收藏 0 原文

七七 2024-11-03 13:11:44

可以使用 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 jQuery

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

回复收藏 0 原文

云之铃。 2024-11-03 13:11:44

我找到的唯一方法是

//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-11-03 13:11:44

onfocus/blur 方法可以很好地从只读字段中删除光标，但浏览器不会自动重新聚焦到下一个字段，并且您可能会完全失去焦点，这不是用户通常所期望的。因此，如果需要，您可以使用纯 JavaScript 来关注您想要的下一个字段，但您必须指定下一个字段：

<input type="text" name="readonly-field" value="read-only" 
readonly onfocus="this.form.NextField.focus()">

其中“NextField”是要转到的字段的名称。（或者，您可以提供一些其他方法来定位下一个字段）。显然，如果您想要导航到某些不可见的 UI 元素（例如选项卡面板），这会更加复杂，因为您也需要对此进行安排。

The onfocus/blur method works ok to remove the cursor from a readonly field, but the browser does not automatically refocus on the next field, and you may lose focus altogether, which is not what the user usually expects. So, if this is required, you can use plain javascript to focus on the next field you want, but you have to specify the next field:

<input type="text" name="readonly-field" value="read-only" 
readonly onfocus="this.form.NextField.focus()">

Where 'NextField' is the name of the field to goto. (Alternatively, you could provide some other means to locate the next field). Obviously, this is more involved if you want to navigate to some non-visible UI element, like a tab-panel, as you will need to arrange this as well.

回复收藏 0 原文