HTML: o'qiydigan matnni ko'rsatadigan kursormi?

Aytaylik, matn qutisi bizda shunday o'qiladi:

<input type="text" readonly />

IE 9 va FF 4da, ushbu maydonni bosganimda, maydonda (miltillovchi bo'lmagan) kursor paydo bo'ladi. Biroq, Chrome'da kursor ko'rsatilmaydi. (O'zingizni http://jsfiddle.net/hqBsW/ saytida ko'ring.)

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.

Shunga qaramasdan, bizning foydalanuvchilarni chalkashtirib yubormoqdamiz, va Chrome uchun readonly maydonlari uchun kursorni ko'rsatmaslik uchun IE/FF ni o'zgartirishni xohlaymiz.

Buning bir yo'li bormi?

22
Men ayni muammo bilan duch kelganman va hal qildim. Bu kirish maydoni uchun marker-voqealarni: yo'q; CSS xususiyatini yozing.
qo'shib qo'ydi muallif Shrirang Kadale, manba
Buni ko'rib chiqaylik, stackoverflow.com/questions/45738397/…
qo'shib qo'ydi muallif Shrirang Kadale, manba

8 javoblar

Mening nikmd23-ning jQuery parchasidan, lekin yaxshiroq ishlashga o'xshash blur() funksiyasi bilan

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

Misol bu yerda: http://jsfiddle.net/eAZa2/

"Disable" funksiyasidan foydalanmang, chunki ariza formaning bir qismi bo'lganda kiritilmaydi

19
qo'shib qo'ydi
Onfocus = "this.blur ()" IE11da ishlamayapti
qo'shib qo'ydi muallif DivineOps, manba
Men o'qishni qanday ishlatish kerakligini bilmoqchi edim: jsfiddle.net/m7saqqpL bu ko'rinmayapti. farq qilmoq.
qo'shib qo'ydi muallif surfmuggle, manba
"Readonly" atributini dinamik ravishda o'zgartirganda, quyidagicha foydalaning: $ ('input') focus (function() {if ($ (this) .is ('[readonly]') this.blur ()}) ;
qo'shib qo'ydi muallif T. Christiansen, manba
Ha, ular bir-biriga o'xshash, chunki har ikkala joy ham tahrirlanmaydi (kichik farqlar matnning rangi, nogiron joylarda esa quyuq kulrang, lekin brauzerlarga bog'liq bo'lishi mumkin). Asosiy farq sizning shakllaringizni serverga joylashtirganda, "o'chirib qo'yilgan" xususiyati bilan kirish "readonly" usuli mavjud bo'lganda umuman yuborilmaydi.
qo'shib qo'ydi muallif Frank, manba

readonly xususiyatini o'chirib qo'yildi ga o'zgartirsangiz, kirish qutisiga bosib bo'lmaydi va shunday qilib kursor bo'lmaydi.

Brauzerga bog'liq holda matnni ham tanlay olmaysiz.

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

Yana bir muqobil - foydalanuvchining muayyan kirish elementiga yo'naltirilgan matn tanlovini majburlashi mumkin. Boshqarish xatti-harakatlaridagi bu o'zgarish foydalanuvchilarni kirish cheklanganligi haqidagi ma'lumotni osonlik bilan tushuntiradi va agar bu oxirgi foydalanish hollari bo'lsa, ularni juda oson nusxalash imkonini beradi.

JQuery-dan foydalanib siz quyidagi kodni yozasiz:

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

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

7
qo'shib qo'ydi
Zo'r va rahmat.
qo'shib qo'ydi muallif Kayote, manba
Bu kirish bo'sh bo'lmagan ekan, bu ishlaydi.
qo'shib qo'ydi muallif Daniel, manba
Men bo'sh (va bosib) ishlov berish uchun tweaked: jsfiddle.net/hqBsW/78
qo'shib qo'ydi muallif Daniel, manba
Ba'zan o'qishga xos xususiyati va nogironlar kerak. HTML5-da siz nogironlar maydonchalarini tasdiqlay olmaysiz, ammo faqat o'qish joylarini tekshirishingiz mumkin.
qo'shib qo'ydi muallif thecoolmacdude, manba

Xato kabi ko'rinadi!

Mozilla bilan ochilgan o'xshash bug (396542) mavjud va bu kursor < readonly yozuvlari yonib turishi kerak, ammo bu xatti-harakatlar noto'g'ri deb hisoblasa, miltillovchi kursorni "bu yerga yozishingiz mumkin" degan ma'noni anglatadi.

Bu xato haqida va/yoki yangi fayllarni (Mozilla bu yerda va Microsoft href = "http://connect.microsoft.com/IE" rel = "noreferrer"> bu yerda )!

Shu bilan birga, @ nikmd23 kabi taklif qilganidek, o'chirib qo'yildi yoki JavaScript bilan ishlashni o'zgartirish orqali eng yaxshi vaqtincha echim kabi ko'rinadi.

6
qo'shib qo'ydi
Nogironlar maydonchalari haqida bir eslatma, nogironlar joylari formada postda serverga yozilmagan.
qo'shib qo'ydi muallif contactmatt, manba
Yuqoridagi fikrga kelsak - bu shaklda maxfiy va nogiron elementni qo'yishning iflos hacki bor.
qo'shib qo'ydi muallif Brent, manba
Oddiy ro'yxat qutisi/combobox uchun maydonni o'chirishni istamaysiz. Shuning uchun, siz uni o'qishingiz shart emas. w3c.github.io/aria/#listbox va w3c.github.io/aria/#combobox
qo'shib qo'ydi muallif seangates, manba
Bu kirish maydoni uchun marker-voqealarni: yo'q; CSS xususiyatini yozing.
qo'shib qo'ydi muallif Shrirang Kadale, manba

Bu HTML va JavaScript yordamida amalga oshirilishi mumkin

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

yoki butun dunyo bo'ylab jQuery yordamida

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

Tegingizning uslubiy xususiyatini belgilashingiz mumkin yoki siz sinf atributining qiymatini belgilashingiz orqali tagingizga CSS class qo'shishingiz mumkin. Muammoni kursorni belgilash orqali hal qilish mumkin. Siz ko'proq bu yerda o'qishingiz mumkin. Bundan tashqari, ushbu tegni kursorni belgilaydigan ba'zi qoidalar mavjud bo'lsa, CSS qoidangiz uchun muhimdir. Haqida qo'shimcha ma'lumot olishingiz mumkin: muhim bu yerda .

2
qo'shib qo'ydi
Savol sichqon kursorini emas, balki matn kursori haqida so'rayapti.
qo'shib qo'ydi muallif nikmd23, manba

Buning uchun yagona yo'l edi

//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
qo'shib qo'ydi

Siz CSS dan foydalanishingiz mumkin:

input {pointer-events:none;}

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

1
qo'shib qo'ydi
Xush kelibsiz. Agar savolingizga javob bersangiz, iltimos kodingiz bilan bog'liq bo'lgan tushuntirishlarni bering. Ba'zi odamlar sizning kodingizni tushuna olmaydilar yoki savolga qanday javob berishini ko'rmaydilar. Yaxshi javob yozishni qanday qilib o'rganishingiz mumkin
qo'shib qo'ydi muallif Nuageux, manba

Faqat CSS uchun tuzatish uchun foydalaning:

input[readonly] {
  pointer-events: none;
}
0
qo'shib qo'ydi