在<input>中使用readonly属性而不更改光标

Question

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

我无法使用该disabled属性,因为request.getParameter()不适用于禁用的字段.

Answer 1

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

input[readonly] {
     cursor: pointer;
}

Answer 2

我不想覆盖bootstrap的默认样式,所以我提出了以下解决方案:

我的文件:

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[readonly] {
  pointer-events: none;
}

Answer 4

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

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

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