从只读输入框中移除文本插入符/指针

Question

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

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

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

理想情况下，我希望它像平常一样具有可聚焦性，但不会出现闪烁的插入符号。

欢迎使用Javascript解决方案。

- Wesley Murch

---

你试图滥用一个设计有其所需功能（如焦点光标、高亮等）的输入控件。任何形式的黑客攻击都不能保证在未来的浏览器版本中能够正常工作。最干净的方法是只使用标签和隐藏字段来提交值。 - Chetan S

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

@eyelidlessness - Chrome不显示插入符号，其他浏览器都可以。 - PhistucK

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

- n3on

---

也许你需要的是禁用（disabled）而不是只读（readonly）。只需使用禁用即可。 - n3on

@n3on: “disabled” 实际上是防止字段发布。 我实际上已经在别人的答案中发布了这个评论，但现在似乎答案已经消失了。 仍在学习如何使用 SO，所以不确定原因。 - Wesley Murch

是的，对了，抱歉我忘记了。那么实现这种行为的唯一方法就是使用隐藏输入字段，并将文本放入简单的HTML标签（div、span、p等）。您可以在页面生成时直接在PHP中执行此操作，或者使用JS将所有只读文本字段替换为隐藏字段并插入新的HTML标签。 - n3on

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

如果您有一个动态只读的输入（例如，取决于DOM的其他部分），则可以通过添加类似于 onfocus="this.attributes.readonly && this.blur()" 的检查来仅在当前为只读时模糊聚焦。 - swornabsent

Answer 2

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

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

- Headache

---

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

在所有浏览器中，它对我来说都完美地工作。感谢您的答案。 - Samir

最佳解决方案，无需JS。 - WooZy

Answer 3

您可以通过将CSS属性指定为transparent来删除闪烁的插入符号。

caret-color: transparent;

您可以在此处测试结果。

- Muhammad Husein

---

这对于在问题中明确要求的IE没有影响... https://developer.mozilla.org/zh-CN/docs/Web/CSS/caret-color#Browser_compatibility - Ralf

Answer 4

可以使用HTML和JavaScript完成。

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

或者 jQuery

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

- Kld

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

- alecellis1985

Answer 6

简单！

只需在输入框中添加disabled，它就无法被点击（聚焦）。

- Tusko Trush

---

但是这样做的话，如果该组件在表单中使用，其值将不会被发布。 - Nitin Kabra

谁在2019年使用本地表单提交？请使用JS进行提交。 - Tusko Trush

Answer 7

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

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

'NextField'是要跳转到的字段的名称。(或者，您可以提供其他定位下一个字段的方法)。显然，如果您想导航到一些不可见的UI元素，比如选项卡面板，那么这将更加复杂，因为您还需要安排这个。

- andora

---

最好将“tabindex”设置为-1，这样它就无法通过键盘快捷键获得焦点。 - Tim