HTML: курсор, отображающий текст ввода только для чтения?

Скажем, у нас есть текстовое поле, которое читается только так:

<input type="text" readonly />

В IE 9 и FF 4, когда я нажимаю на это поле, в поле появляется курсор (не мигающий). Однако в Chrome курсор не отображается. (Смотрите сами http://jsfiddle.net/hqBsW/.)

Я полагаю, я понимаю, почему IE/FF предпочитает показывать курсор &mdash, поэтому пользователь знает, что он или она все еще может выбрать значение в поле.

Тем не менее, это, очевидно, запутывает наших пользователей, и мы хотели бы изменить IE/FF, чтобы не показывать курсор, как это делает Chrome для полей readonly.

Есть ли способ сделать это?

Ответ 1

Звучит как ошибка!

Существует аналогичная ошибка (396542), открытая с Mozilla, говоря, что курсор должен мигать в входах readonly, но это поведение чувствует неправильный, предполагается, что мигающий курсор означает "вы можете ввести здесь".

Вы должны прокомментировать эту ошибку и/или добавить новые файлы (с Mozilla здесь и с Microsoft здесь)!

Тем временем использование disabled или изменение поведения с JavaScript, как предлагалось @nikmd23, кажется лучшим решением.

Ответ 2

Мое решение, из nikmd23 jQuery snippet, но с функцией blur(), которая, кажется, работает лучше

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

Пример здесь: http://jsfiddle.net/eAZa2/

Не используйте атрибут "disabled", потому что вход не будет отправлен, если он является частью формы

Ответ 3

Если вы измените атрибут readonly на disabled, вы не сможете щелкнуть его в поле ввода и, следовательно, не будете иметь курсор.

В зависимости от браузера, возможно, вы не сможете выбрать текст.

Здесь представлены примеры различных входных состояний: http://jsfiddle.net/hqBsW/1/

Другой альтернативой может быть выбор текста, когда пользователь фокусируется на данном элементе ввода. Это изменение в поведении управления более легко подсказывает пользователю, что вход ограничен, и позволяет им копировать очень легко, если это конечный вариант использования.

Используя jQuery, вы должны написать код выбора следующим образом:

$('input[readonly]').focus(function(){
    this.select();
});

Я обновил этот пример, чтобы показать это поведение в действии: http://jsfiddle.net/hqBsW/2/

Ответ 4

Это можно сделать с помощью html и javascript

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

или глобально с помощью jQuery

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

Ответ 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');

Ответ 6

Вы можете использовать css:

input {pointer-events:none;}

Ссылка: https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

Ответ 7

Вы можете установить атрибут стиля вашего тега или добавить класс css в свой тег, установив значение атрибута класса. Ваша проблема может быть решена путем установки курсора. Вы можете прочитать здесь здесь. Кроме того, если у вас есть некоторые правила, которые устанавливают курсор этого тега, вы можете добавить! Важно для вашего правила css. Вы можете узнать больше о важном здесь.