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

Question

如果我的<input>字段具有readonly属性，则它仍会显示工字形文本光标。有没有办法阻止光标显示？

我无法使用disabled属性，因为request.getParameter()对禁用的字段不起作用。

Answer 1

readonly元素的想法是您仍然可以阅读和复制文本，而不是编辑它们。也就是说，您可以使用CSS attribute selectors更改光标。此示例将匹配具有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 type="text" value="test" onfocus="this.blur()" readonly="readonly" />

帮助你隐藏光标的主要内容是onfocus =“this.blur（）”。

Answer 4

对于那些不想让插入符号显示的人：

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