Использовать атрибут readonly в <input> без изменения курсора

Если у меня есть поле <input> с атрибутом readonly, оно все равно появляется с текстовым курсором I-beam. Есть ли способ остановить отображение этого курсора?

Я не могу использовать атрибут disabled, потому что request.getParameter() не работает в отключенных полях.

Ответ 1

Попробуйте эту разметку в форме для текстового поля

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

Главное, что помогает вам скрыть курсор, - onfocus = "this.blur()".

Ответ 2

Идея элементов readonly заключается в том, что вы все равно можете читать и копировать текст, просто не редактируя его. Тем не менее, вы можете изменить курсор с помощью селекторов атрибутов CSS. Этот пример будет соответствовать любому элементу input с атрибутом readonly:

input[readonly] {
     cursor: pointer;
}

Ответ 3

Я не хотел переопределять стили по умолчанию для начальной загрузки, поэтому я пришел со следующим решением:

Мой младший файл:

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>

Ответ 4

Для людей, которые вообще не хотят показывать каретки:

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