HTML: курсор отображается в только для чтения вводимого текста? - PullRequest
Новая
       31

HTML: курсор отображается в только для чтения вводимого текста?

23 голосов
/ 27 октября 2011

Допустим, у нас есть текстовое поле, предназначенное только для чтения, например: 

<input type="text" readonly />

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

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

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

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

Ответы [ 8 ]

19 голосов
/ 16 сентября 2013

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

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

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

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

7 голосов
/ 27 октября 2011

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

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

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

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

7 голосов
/ 27 октября 2011

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

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

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

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

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

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

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

4 голосов
/ 25 мая 2016

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

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

или глобально, используя jQuery 

$(document).on('focus', 'input[readonly]', function () {
        this.blur();
    });
2 голосов
/ 27 июня 2018

Только для исправления CSS используйте: 

input[readonly] {
  pointer-events: none;
}
1 голос
/ 10 апреля 2015

единственный способ найти это был 

//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');
0 голосов
/ 02 июня 2017

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

input {pointer-events:none;}

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

0 голосов
/ 27 октября 2011

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

...