HTML: курсор, який відображається у текстовому режимі?

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

<input type="text" readonly />

У IE 9 та FF 4, коли я натискаю це поле, у полі з'являється курсор (без блимання). У Chrome, однак, курсор не відображається. (Див. Для себе на сторінці http://jsfiddle.net/hqBsW/ .)

I suppose I understand why IE/FF opt to show the cursor—so the user knows he or she can still select the value in the field.

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

Чи є спосіб зробити це?

22
Я також зіткнувся з тією ж проблемою, і отримав рішення. Напишіть властивість CSS для цього поля введення pointer-events: none; .
додано Автор Shrirang Kadale, джерело
Подивіться на це, stackoverflow.com/questions/45738397/ …
додано Автор Shrirang Kadale, джерело

8 Відповіді

Моє рішення, з фрагмента jQuery nikmd23, але з функцією blur (), яка, здається, працює краще

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

Приклад тут: http://jsfiddle.net/eAZa2/

Не використовуйте атрибут "вимкнено", оскільки вхід не буде поданий, коли він є частиною форми

19
додано
На "фокусі =" this.blur() ", здається, не працює в IE11
додано Автор DivineOps, джерело
Я хотів би знати, якщо це важливо, як тільки було використано текст: jsfiddle.net/m7saqqpL це здається, що це не змінити.
додано Автор surfmuggle, джерело
Якщо змінити атрибут readonly динамічно, використовуйте: $ ('input'). Focus (function() {if ($ (this) .is ('[readonly]')) this.blur ()}) ;
додано Автор T. Christiansen, джерело
Так, вони виглядають однаково, оскільки обидва поля не редагуються (інша невелика різниця - це колір тексту, у полях з відключеними темно-сірими, але це може залежати від браузерів). Основна відмінність полягає в тому, що після надсилання ваших форм на сервері, вхід із атрибутом "вимкнено" взагалі не буде поданий, тоді як "лише для читання".
додано Автор Frank, джерело

Якщо ви змінюєте атрибут readonly на disabled , ви не зможете натиснути на поле вводу і, таким чином, не матиме курсору.

Залежно від браузера, можливо, ви не зможете обрати текст, хоча це і є.

I've provided examples of the various input states here: http://jsfiddle.net/hqBsW/1/

Інша альтернатива - ви можете примусити вибір тексту, коли користувач фокусується на певному вхідному елементі. Ця зміна керуючої поведінки полегшить користувачам вказівки на те, що вхід обмежений, і дозволяє їм копіювати дуже легко, якщо це є кінцевим використанням.

Використовуючи jQuery, ви напишите код вибору таким:

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

I've updated the example to show this behavior in action: http://jsfiddle.net/hqBsW/2/

7
додано
Відмінно і дякую.
додано Автор Kayote, джерело
Це буде працювати, якщо вхід не порожній.
додано Автор Daniel, джерело
Я налаштував його, щоб очистити (і клацнути): jsfiddle.net/hqBsW/78
додано Автор Daniel, джерело
Іноді вам потрібен лише атрибут read-only проти відключення. У HTML5 ви не можете перевіряти відключені поля, але ви можете перевіряти лише поля з читанням.
додано Автор thecoolmacdude, джерело

Схоже, помилка!

Існує аналогічна помилка (396542) , відкрита в Mozilla, яка говорить, що курсор < em> повинні миготіти входами readonly - але ця поведінка не працює, мигаючий курсор має на увазі: "Ви можете ввести тут".

Ви повинні коментувати цю помилку та/або файл новими (з Mozilla тут і з Microsoft тут )!

Тим часом, використовуючи disabled або змінюючи поведінку з JavaScript, як запропонував @ nikmd23, здається найкращим рішенням.

6
додано
Одна примітка про поля з відключеними полями полягає в тому, що поля відключені не публікуються на сервер у повідомленні форми.
додано Автор contactmatt, джерело
Що стосується вищезгаданого коментарю - то, звичайно, є брудний рубати вкладання прихованого та відключеного елемента у форму.
додано Автор Brent, джерело
Відключення поля для списку лише для читання/combobox не є бажаним. Отже, вам потрібно лише держава, що читає, не відкидаючи його. w3c.github.io/aria/#listbox і w3c.github.io/aria/#combobox
додано Автор seangates, джерело
Напишіть властивість CSS для цього поля введення pointer-events: none; .
додано Автор Shrirang Kadale, джерело

Це можна зробити за допомогою html та javascript

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

або глобально використовуючи jQuery

$(document).on('focus', 'input[readonly]', function() {
        this.blur();
    });
4
додано

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

2
додано
Питання стосовно тексту курсору, а не курсора миші.
додано Автор nikmd23, джерело

єдиним способом, який я знайшов для цього

//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');
1
додано

Ви можете використовувати CSS :

input {pointer-events:none;}

Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

1
додано
Ласкаво просимо на SO. Відповідаючи на запитання, надайте пояснення, пов'язані з вашим кодом. Деякі люди можуть не зрозуміти ваш код або не бачити, як він відповідає на запитання. Див як написати правильну відповідь
додано Автор Nuageux, джерело

Для виправлення лише CSS використовуйте:

input[readonly] {
  pointer-events: none;
}
0
додано