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

Posted 2023-02-19

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

【英文标题】：Remove text caret/pointer from focused readonly input

【发布时间】：2011-07-23 13:42:43

【问题描述】：

我正在使用<input readonly="readonly">，其样式为普通文本，以消除交互字段的外观，但仍显示值。

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

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

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

欢迎使用 javascript 解决方案。

【问题讨论】：

您正试图滥用输入控件，该控件旨在具有所需的功能（如焦点插入符号、突出显示等）。任何形式的 hack 都不能保证在未来版本的浏览器中有效。最简洁的方法是只使用标签和隐藏字段来提交值。

考虑到这一点，我认为您在字段只读时显示插入符号的经验并不常见。您使用的是什么操作系统/浏览器？我从未在任何 Mac 或 Windows 浏览器上看到只读字段显示插入符号；我承认我不测试非 Mac *nix 浏览器。

@eyelidlessness - Chrome 不显示插入符号，其余部分显示。

【参考方案1】：

简单！

只需在输入中添加disabled，它将无法点击（聚焦）

【讨论】：

但是有了这个，如果在表单中使用该特定组件的值将不会被发布。

2019年谁用原生表单提交？使用 JS ?

【参考方案2】：

您可以通过将 css 属性指定为 transparent

来移除闪烁的插入符号

caret-color: transparent;

你可以测试结果here

【讨论】：

这对问题中明确要求的 IE 没有影响...developer.mozilla.org/en-US/docs/Web/CSS/…

【参考方案3】：

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

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

【讨论】：

它还可以防止onclick事件发生。

它在所有浏览器中都非常适合我。感谢您的回答

【参考方案4】：

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

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

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

【讨论】：

最好将tabindex设置为-1，这样就不能用键盘快捷键聚焦了。

【参考方案5】：

可以使用html和javascript来完成

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

或 jQuery

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

【参考方案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');

【参考方案7】：

我的没有插入符号左右：

<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" >

【讨论】：

那么也许 disabled 就是你要找的东西。只需使用它而不是只读的。

@n3on: "disabled" 实际上阻止了该字段的发布。我实际上已经在别人的答案上发表了这条评论，但现在答案似乎已经消失了。还在学习如何使用 SO，所以不知道为什么。

是的，对不起，我忘了。然后，执行此行为的唯一方法是为其使用隐藏的输入字段并将文本放在一个简单的 html 标记（div、span、p、...）中。您可以在页面生成时直接在 php 中执行此操作，也可以使用 JS 将所​​有只读文本字段替换为隐藏字段并插入新的 html-tag。

<input id="someID" onfocus="this.blur()" readonly="readonly" /> - 实际上正确的 HTML 是 readonly="readonly" :)

如果您有一个动态只读的输入（例如，取决于 DOM 的其他部分），您可以通过添加像 onfocus="this.attributes.readonly && this.blur()" 这样的检查来模糊焦点，仅当它当前是只读的时