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

Question

我正在使用

<input readonly="readonly">

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

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

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

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

欢迎使用 JavaScript 解决方案。

Answer 1

我的没有插入符号等：

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

Answer 2

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

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

Answer 3

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

来删除闪烁的插入符号

caret-color: transparent;

您可以在这里测试结果

Answer 4

可以使用 html 和 javascript 来完成

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

或 jQuery

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

Answer 5

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

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

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

Answer 6

简单！

只需在输入中添加

disabled

，它将不可点击（聚焦）

Answer 7

我找到的唯一方法是

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