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 робіць для </толькі для чытання кода> палёў.

Ці ёсць спосаб зрабіць гэта?

22
Я таксама сутыкнуўся з той жа праблемай, і я атрымаў рашэнне. Запісваць на паказальнік-падзеі: няма; CSS ўласцівасць для гэтага поля ўводу.
дададзена аўтар Shrirang Kadale, крыніца
Паглядзіце на гэта, stackoverflow.com/questions/45738397/…
дададзена аўтар Shrirang Kadale, крыніца

8 адказы

Маё рашэнне, з jQuery сниппета nikmd23, але з функцыяй размыцця (), што, здаецца, працуе лепш

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

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

Не выкарыстоўвайце атрыбут «адключана», таму што ўваход не будзе прадстаўлены, калі яна з'яўляецца часткай формы

19
дададзена
OnFocus = «this.blur ()», здаецца, не працуюць у IE11
дададзена аўтар DivineOps, крыніца
Я хацеў бы ведаць, калі гэта мае значэнне, як толькі для чытання было выкарыстана: jsfiddle.net/m7saqqpL , здаецца, што гэта не зрабіць розніцу.
дададзена аўтар surfmuggle, крыніца
Пры змене ўстаноўкі "толькі для чытання" атрыбут дынамічна, выкарыстоўвайце :. <�Код> $ ( 'ўваход') фокус (функцыя() {калі ($ (гэта) .а ( '[толькі для чытання]')) this.blur ()})
дададзена аўтар T. Christiansen, крыніца
Так, яны выглядаюць аднолькава, таму што абодва поля не даступныя для рэдагавання (яшчэ адна невялікая розніца колер тэксту, на палях з абмежаванымі магчымасцямі, гэта цёмна-шэры, але гэта можа залежаць ад браўзераў). Асноўнае адрозненне, калі вы размяшчае свае формы на сервер, уваход з атрыбутам «адключана» не будзе прадстаўлена на ўсіх у той час як «толькі для чытання» ўваход будзе.
дададзена аўтар Frank, крыніца

Калі змяніць толькі для чытання атрыбут адключаны , вы не зможаце пстрыкнуць у поле ўводу і, такім чынам, не будзе мець курсор.

У залежнасці ад браўзэра, вы не можаце быць у стане выбраць тэкст альбо хоць.

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, крыніца
Часам вам трэба толькі для чытання атрыбут супраць інвалідаў. У HTML5, вы не можаце праверыць інвалід поля, але вы можаце праверыць толькі для чытання палёў.
дададзена аўтар thecoolmacdude, крыніца

Падобна на тое, памылка!

Існуе падобнай памылкі (396542) адкрыць з Mozilla, кажучы, што курсор < эм> павінен міргаюць толькі для чытання ўваходы - але такія паводзіны здаецца няправільным, перарывісты курсор павінен мець на ўвазе, «вы можаце ўвесці тут.»

Вы павінны пракаментаваць гэта памылка і/або файл новыя (з Mozilla тут і з Microsoft <�а HREF = "http://connect.microsoft.com/IE" отн = "noreferrer"> тут )!

У той жа час, выкарыстоўваючы адключаны або змяненне паводзін з JavaScript, бо @ nikmd23 прапанаваў, здаецца, лепшы абыходны шлях.

6
дададзена
Адно заўвага аб палях з абмежаванымі фізічнымі магчымасцямі, у тым, што інваліды поля не размяшчаюцца на сэрвэры ў выглядзе паста.
дададзена аўтар contactmatt, крыніца
У сувязі з вышэй каментар - ёсць, вядома, брудны хак пакласці схаваны і інвалідаў элемент у форме.
дададзена аўтар Brent, крыніца
Адключэнне поле толькі для чытання ListBox/выпадальны спіс не з'яўляецца пажаданым. Такім чынам, вам трэба толькі для чытання стану без disbling яго. w3c.github.io/aria/#listbox і w3c.github.io/aria/#combobox
дададзена аўтар seangates, крыніца
Запісваць на паказальнік-падзеі: няма; CSS ўласцівасць для гэтага поля ўводу.
дададзена аўтар 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
дададзена