javascript - 在中使用只读属性不改变光标

Question

如果我有一个<input>具有该readonly属性的字段，它仍然会出现在 I 型文本光标中。有没有办法阻止该光标显示？

我不能使用该disabled属性，因为request.getParameter()它不适用于禁用的字段。

Answer 1

元素的想法readonly是你仍然可以阅读和复制文本，只是不能编辑它们。也就是说，您可以使用CSS 属性选择器更改光标。此示例将匹配input具有readonly属性的任何元素：

input[readonly] {
     cursor: pointer;
}

Answer 2

我不想覆盖引导程序的默认样式，所以我提出了以下解决方案：

我的 LESS 文件：

input[readonly] {
    &.default-cursor {
        cursor: default;
    }
}

或者在 CSS 中：

input[readonly].default-cursor {
    cursor: default;
}

我的 HTML：

<input type="text" class="form-control text-xl default-cursor" readonly>

Answer 3

在您的表单中为文本字段尝试此标记

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

帮助您隐藏光标的主要内容是 onfocus="this.blur()"。

Answer 4

对于根本不想显示插入符号的人：

input[readonly] {
  pointer-events: none;
}