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

Question

我正在使用一个<input readonly="readonly">样式为普通文本来删除交互式字段的外观,但仍显示该值.

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

问题:单击/聚焦字段时仍会出现闪烁的插入符号.(至少在Win7上的FF和IE8中)

理想情况下,我希望它能像往常那样表现,可以集中精力,但没有闪烁的插入符号.

Javascript解决方案欢迎.

Answer 1

我的没有插入符号:

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

对不起,现在我明白了你的问题.

试试这个:

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

那么也许残疾人就是你要找的.只需使用它而不是只读. (3认同)
@ n3on:"禁用"实际上会阻止该字段发布.我实际上已将此评论发布在其他人的答案上,但现在答案似乎已经消失了.还在学习如何使用SO,所以不确定原因. (2认同)
是的,sry,我忘记了.然后,执行此行为的唯一方法是使用隐藏的输入字段,并将文本放在一个简单的html标记(div,span,p,...)中.您可以在生成页面时直接在PHP中执行此操作,或者使用JS将所有只读文本字段替换为隐藏字段并插入新的html标记. (2认同)
`<input id ="someID"onfocus ="this.blur()"readonly ="readonly"/>` - 实际上正确的HTML是`readonly ="readonly"`:) (2认同)
如果您有一个动态只读的输入（例如，取决于 DOM 的其他部分），您可以通过添加像 `onfocus="this.attributes.readonly && this.blur() 这样的检查来模糊焦点仅当它当前是只读的"` (2认同)

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();
    });