IE 9 ve FF 4'te, bu alana tıkladığımda, alanda (yanıp sönmeyen) bir imleç görünür. I suppose I understand why IE/FF opt to show the cursor—so the"> IE 9 ve FF 4'te, bu alana tıkladığımda, alanda (yanıp sönmeyen) bir imleç görünür. I suppose I understand why IE/FF opt to show the cursor—so the"> IE 9 ve FF 4'te, bu alana tıkladığımda, alanda (yanıp sönmeyen) bir imleç görünür. I suppose I understand why IE/FF opt to show the cursor—so the" />

HTML: imleç salt okunur giriş metninde mi gösteriliyor?

Diyelim ki şöyle bir metin kutusu var:

<input type="text" readonly />

IE 9 ve FF 4'te, bu alana tıkladığımda, alanda (yanıp sönmeyen) bir imleç görünür. Ancak Chrome'da imleç gösterilmiyor. ( http://jsfiddle.net/hqBsW/ adresinden kendiniz görün.)

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.

Yine de, kullanıcılarımıza açıkça kafa karıştırıyor ve Chrome'un readonly alanları için yaptığı gibi, imleci göstermemek için IE/FF'yi değiştirmek istiyoruz.

Bunu yapmanın bir yolu var mı?

22
Aynı problemle de karşılaştım ve çözümü aldım. Bu giriş alanı için pointer-event: none; CSS özelliğini yazın.
katma yazar Shrirang Kadale, kaynak
katma yazar Shrirang Kadale, kaynak

8 cevap

Benim çözümüm, nikmd23'in jQuery snippet'inden daha iyi çalışıyor gibi görünen blur() işleviyle

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

Örnek buraya: http://jsfiddle.net/eAZa2/

"Disable" özelliğini kullanmayın, çünkü form bir formun parçası olduğunda gönderilmez

19
katma
Onfocus = "this.blur ()" IE11'de çalışmıyor gibi görünüyor
katma yazar DivineOps, kaynak
Okunmanın nasıl kullanıldığının önemli olup olmadığını öğrenmek istedim: jsfiddle.net/m7saqqpL öyle görünmüyor bir fark yarat.
katma yazar surfmuggle, kaynak
"Readonly" özniteliğini dinamik olarak değiştirirken, şunu kullanın: $ ('input'). Focus (function() {if ($ (this) .is ('[readonly]')) this.blur ()}) ;
katma yazar T. Christiansen, kaynak
Evet, aynı görünüyorlar çünkü her iki alan da düzenlenemez (diğer küçük bir fark, metnin rengi, engelli alanlardaki koyu gridir, ancak tarayıcılara bağlı olabilir). Temel fark, formlarınızı sunucuya gönderdiğinizde, "salt okunur" özniteliğine sahip bir girdi, "salt okunur" bir giriş yapılarak gönderilmez.
katma yazar Frank, kaynak

readonly özniteliğini disabled olarak değiştirirseniz, giriş kutusuna tıklayamayacaksınız ve böylece bir imleç olmayacak.

Tarayıcıya bağlı olarak, metni de seçemeyebilirsiniz.

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

Başka bir alternatif, kullanıcı belirli bir giriş öğesine odaklandığında bir metin seçimini zorlayabilir. Kontrol davranışındaki bu değişiklik, kullanıcıyı girişin kısıtlanmış olduğu gerçeğine daha kolay bir şekilde akıtacak ve son kullanım durumu olduğunda kolayca kopyalanmasına izin verecektir.

JQuery'yi kullanarak seçim kodunu şöyle yazarsınız:

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

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

7
katma
Harika teşekürler.
katma yazar Kayote, kaynak
Bu giriş boş olmadığı sürece çalışacaktır.
katma yazar Daniel, kaynak
Boş (ve tıklatarak) işlemek için onu tweaked: jsfiddle.net/hqBsW/78
katma yazar Daniel, kaynak
Bazen, readonly özniteliğine karşı devre dışı bırakmanız gerekir. HTML5'te, devre dışı bırakılan alanları doğrulayamazsınız, ancak salt okunur alanları doğrulayabilirsiniz.
katma yazar thecoolmacdude, kaynak

Bir böcek gibi geliyor!

İmlecin olduğunu söyleyen benzer bir hata (396542) vardır. em> salt okunur girişlerinde yanıp sönmelidir - ancak bu davranış yanlış geliyorsa, yanıp sönen bir imlecin "buraya yazabilirsiniz" anlamına gelmesi beklenir.

Bu hata hakkında yorum yapmalı ve/veya yenilerini yazmalısınız (Mozilla burada ve Microsoft ile burada )!

Bu arada, disabled komutunu kullanmak veya @ nikmd23'ün önerdiği gibi JavaScript ile davranışı değiştirmek en iyi çözüm gibi görünüyor.

6
katma
Devre dışı alanlar hakkında bir not, devre dışı alanların bir form defterine sunucuya gönderilmemesidir.
katma yazar contactmatt, kaynak
Yukarıdaki yorumla ilgili olarak - elbette formda gizli ve engelli bir unsurun yerleştirilmesinin kirli hacki vardır.
katma yazar Brent, kaynak
Salt okunur bir liste kutusu/combobox için bir alanın devre dışı bırakılması arzu edilmez. Bu nedenle, onu dağıtmadan salt durumlara ihtiyacınız var. w3c.github.io/aria/#listbox ve w3c.github.io/aria/#combobox
katma yazar seangates, kaynak
Bu giriş alanı için pointer-event: none; CSS özelliğini yazın.
katma yazar Shrirang Kadale, kaynak

Html ve JavaScript kullanılarak yapılabilir

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

veya jQuery kullanarak global olarak

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

Etiketinizin stil özelliğini ayarlayabilir veya sınıf özniteliğinin değerini ayarlayarak etiketinize bir CSS sınıfı ekleyebilirsiniz. İmleciniz ayarlanarak probleminiz çözülebilir. Daha fazla burayı okuyabilirsiniz. Ayrıca, bu etiketin imlecini ayarlayan bazı kurallarınız varsa, CSS kuralınıza önemli ekleyebilirsiniz. Önemli buradan daha fazla bilgi edinebilirsiniz.

2
katma
Soru, fare imlecini değil, metin imlecini soruyor.
katma yazar nikmd23, kaynak

bunun için bulduğum tek yol

//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
katma

CSS kodunu kullanabilirsiniz:

input {pointer-events:none;}

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

1
katma
SO'ya hoşgeldiniz. Bir soruya cevap verirken lütfen kodunuzla ilişkili açıklama sağlayın. Bazı kişiler kodunuzu anlayamayabilir veya soruyu nasıl yanıtladığını görmeyebilir. İyi bir yanıt nasıl yazılır konusuna bakın.
katma yazar Nuageux, kaynak

Bir CSS için yalnızca düzeltin, kullanın:

input[readonly] {
  pointer-events: none;
}
0
katma