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
Мен де сол мәселеге тап болдым және шешім қабылдадым. Бұл енгізу өрісі үшін көрсеткіш-оқиғалар: none; CSS сипатын жазыңыз.
қосылды автор Shrirang Kadale, көзі
Бұған назар аударыңыз, stackoverflow.com/questions/45738397/…
қосылды автор Shrirang Kadale, көзі

8 жауаптар

Менің шешімім nikmd23-дің jQuery үзіндісінен, бірақ blur() функциясымен жақсы жұмыс істейтін сияқты

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

Мысал мұнда: http://jsfiddle.net/eAZa2/

«Өшірулі» атрибутын пайдаланбаңыз, себебі пішіннің бір бөлігі болған кезде кіріс енгізілмейді

19
қосылды
Onfocus = «this.blur ()» IE11-де жұмыс істемейді
қосылды автор DivineOps, көзі
Мен оқып үйренудің маңыздылығы туралы білгім келді: jsfiddle.net/m7saqqpL , меніңше, бұл айырмашылық жасаңыз.
қосылды автор surfmuggle, көзі
«Readonly» атрибутын динамикалық түрде өзгерткенде, $ ('input') функциясын пайдаланыңыз: focus (function() {if ($ (this) .is ('[readonly]') this.blur ()}) ;
қосылды автор T. Christiansen, көзі
Ия, олар бірдей, себебі екі өріс де түзетілмейді (басқа кішкене айырмашылық мәтіннің түсі, мүгедек өрістерде бұл қара сұр, бірақ ол браузерлерге байланысты болуы мүмкін). Басты айырмашылығы, сіз өзіңіздің пішіндеріңізді серверге жібергенде, «өшірілген» атрибуты бар кіріс «readonly» кірісінде мүлде жіберілмейді.
қосылды автор Frank, көзі

readonly төлсипатын өшірілген деп өзгертсеңіз, енгізу жолағына басу мүмкін емес, сондықтан курсор болмайды.

Браузерге байланысты мәтінді таңдай алмайсыз.

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, көзі

Қателікке ұқсайды!

Mozilla-мен ашық ұқсас қате (396542) бар, бұл курсор < readonly кірістерінде жыпылықтайды, бірақ бұл мінез-құлықтың дұрыс емес екенін білдіреді, жыпылықтайтын курсорды «мұнда теруге болады» дегенді білдіреді.

Бұл қате туралы және/немесе жаңа файлдарды (Mozilla мұнда және Microsoft href = «http://connect.microsoft.com/IE» rel = «noreferrer»> мұнда )!

Сонымен қатар, өшірулі немесе JavaScript @ @ nikmd23 ретінде ұсынылған мінез-құлықты өзгерту арқылы ең жақсы шешім ретінде көрінеді.

6
қосылды
Өшірілген өрістер туралы бір ескертпе - бұл өшірілген өрістер пішіндегі пошта серверінде орналастырылмайды.
қосылды автор contactmatt, көзі
Жоғарыда айтылған ескертулерге қатысты - бұл, әрине, жасырын және бұзылған элементті пішінге қоюдың кіршіксіздігі.
қосылды автор Brent, көзі
Оқу тізімін/командалық терезесін өшіру қажет емес. Сондықтан, оны оқшауланбаған күйден шығару қажет. w3c.github.io/aria/#listbox және w3c.github.io/aria/#combobox
қосылды автор seangates, көзі
Бұл енгізу өрісі үшін көрсеткіш-оқиғалар: none; 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
қосылды