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属性指定为透明

来删除闪烁的插入符号

caret-color: transparent;

您可以测试结果here

Answer 4

可以使用html和javascript

完成

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

或jQuery

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

Answer 5

我找到的唯一方法是

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

Answer 6

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

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

Where＆＃39; NextField＆＃39;是要转到的字段的名称。（或者，您可以提供一些其他方法来定位下一个字段）。显然，如果您想要导航到一些不可见的UI元素（如选项卡面板），则会更加复杂，因为您还需要对其进行排列。

Answer 7

容易！

只需将disabled添加到输入中，它将不会被单击（聚焦）

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

7 个答案: