44

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

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

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

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

欢迎使用 Javascript 解决方案。

4

7 回答 7

54

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

<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" >
于 2011-03-26T17:35:01.260 回答
13

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

[readonly='readonly'] {
   pointer-events: none;
}
于 2017-06-20T17:39:55.010 回答
10

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

caret-color: transparent;

你可以在这里测试结果

于 2018-08-21T10:52:54.057 回答
5

可以使用 html 和 javascript 来完成

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

或 jQuery

$(document).on('focus', 'input[readonly]', function () {
        this.blur();
    });
于 2016-05-25T14:36:18.323 回答
0

我为此找到的唯一方法是

//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');
于 2015-04-10T14:23:21.130 回答
0

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

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

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

于 2016-10-31T13:22:51.953 回答
0

简单的！

只需添加disabled到输入，它将不可点击（聚焦）

于 2018-11-30T15:13:13.860 回答