HTML: cursor weergegeven in alleen-lezen-tekst?

Laten we zeggen dat we een tekstvak hebben dat alleen leest, zoals:

<input type="text" readonly />

In IE 9 en FF 4 verschijnt een (niet-knipperende) cursor in het veld wanneer ik op dit veld klik. In Chrome wordt de cursor echter niet weergegeven. (Overtuig uzelf op 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.

Niettemin is het kennelijk verwarrend voor onze gebruikers en willen we IE/FF wijzigen om de cursor niet weer te geven, zoals Chrome doet voor alleen-lezen velden.

Is er een manier om dit te doen?

22
Ik kreeg ook hetzelfde probleem en ik kreeg de oplossing. Schrijf de eigenschap pointer-events: none; CSS voor dat invoerveld.
toegevoegd de auteur Shrirang Kadale, de bron
toegevoegd de auteur Shrirang Kadale, de bron

8 antwoord

Mijn oplossing, van het jQuery-fragment van nikmd23, maar met de vervaging() -functie die beter lijkt te werken

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

Voorbeeld hier: http://jsfiddle.net/eAZa2/

Gebruik het kenmerk "uitgeschakeld" niet omdat de invoer niet zou worden verzonden als deze deel uitmaakt van een formulier

19
toegevoegd
De onfocus = "this.blur ()" lijkt niet te werken in IE11
toegevoegd de auteur DivineOps, de bron
Ik wilde weten of het ertoe doet hoe readonly werd gebruikt: jsfiddle.net/m7saqqpL lijkt het erop dat het niet Maak een verschil.
toegevoegd de auteur surfmuggle, de bron
Gebruik het volgende bij het dynamisch wijzigen van het kenmerk "alleen-lezen": $ ('input') focus (function() {if ($ (this) .is ('[readonly]')) this.blur ()}) ;
toegevoegd de auteur T. Christiansen, de bron
Ja, ze zien er hetzelfde uit, omdat beide velden niet kunnen worden bewerkt (nog een klein verschil is de kleur van de tekst, op uitgeschakelde velden is het donkergrijs maar dit kan afhankelijk zijn van browsers). Het grootste verschil is dat wanneer u uw formulieren op de server plaatst, een invoer met het kenmerk "uitgeschakeld" helemaal niet zal worden ingediend terwijl een "alleen-lezen" invoer dit wel zal doen.
toegevoegd de auteur Frank, de bron

Als u het kenmerk alleen-lezen wijzigt in uitgeschakeld , kunt u niet in het invoervak ​​klikken en heeft u dus geen cursor.

Afhankelijk van de browser, kunt u de tekst echter ook niet selecteren.

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

Een ander alternatief is dat u een tekstselectie kunt forceren wanneer de gebruiker scherpstelt op een bepaald invoerelement. Deze verandering in het besturingsgedrag zou de gebruiker gemakkelijker in het feit wijzen dat invoer beperkt is, en stelt hen in staat om zeer gemakkelijk te kopiëren als dat het geval van het eindgebruik is.

Met jQuery zou je de selectiecode als volgt kunnen schrijven:

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

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

7
toegevoegd
Uitstekend en dank je.
toegevoegd de auteur Kayote, de bron
Dit werkt zolang de invoer niet leeg is.
toegevoegd de auteur Daniel, de bron
Ik heb het aangepast om het leeg te verwerken (en te klikken): jsfiddle.net/hqBsW/78
toegevoegd de auteur Daniel, de bron
Soms hebt u het alleen-leeskenmerk versus uitgeschakeld nodig. In HTML5 kunt u uitgeschakelde velden niet valideren, maar kunt u alleen-lezen velden valideren.
toegevoegd de auteur thecoolmacdude, de bron

Klinkt als een bug!

Er is een vergelijkbare bug (396542) geopend met Mozilla en zegt dat de cursor < em> should knipperen in readonly -ingangen - maar dat gedrag voelt verkeerd, een knipperende cursor zou moeten betekenen: "u kunt hier typen."

U moet reageren op die bug en/of nieuwe bestanden maken (met Mozilla hier en met Microsoft hier )!

Ondertussen lijkt het gebruik van disabled of het gedrag met JavaScript te veranderen, zoals @ nikmd23 suggereerde, de beste oplossing.

6
toegevoegd
Een opmerking over uitgeschakelde velden is dat uitgeschakelde velden niet in een formulier worden gepost naar de server.
toegevoegd de auteur contactmatt, de bron
Met betrekking tot de bovenstaande opmerking - er is natuurlijk de vuile hack van het plaatsen van een verborgen en uitgeschakeld element in de vorm.
toegevoegd de auteur Brent, de bron
Uitschakelen van een veld voor een readonly listbox/combobox is niet wenselijk. Daarom heb je alleen readonly nodig zonder het te verslaan. w3c.github.io/aria/#listbox en w3c.github.io/aria/#combobox
toegevoegd de auteur seangates, de bron
Schrijf de eigenschap pointer-events: none; CSS voor dat invoerveld.
toegevoegd de auteur Shrirang Kadale, de bron

Het kan worden gedaan met behulp van html en javascript

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

of globaal met behulp van jQuery

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

U kunt het stijlkenmerk van uw tag instellen of u kunt een css-klasse aan uw tag toevoegen door de waarde van het class-attribuut in te stellen. Uw probleem kan worden opgelost door de cursor in te stellen. U kunt hier meer lezen. Ook als u enkele regels hebt die de cursor van deze tag instellen, kunt u! Belangrijk toevoegen aan uw CSS-regel. U kunt hier meer lezen over! Belangrijke hier .

2
toegevoegd
De vraag is om een ​​tekstcursor, niet de muisaanwijzer.
toegevoegd de auteur nikmd23, de bron

de enige manier die ik hiervoor vond was

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

U kunt CSS gebruiken:

input {pointer-events:none;}

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

1
toegevoegd
Welkom bij SO. Geef bij het beantwoorden van een vraag uitleg bij uw code. Sommige mensen begrijpen uw code misschien niet of zien niet hoe deze de vraag beantwoordt. Zie hoe u een goed antwoord schrijft
toegevoegd de auteur Nuageux, de bron

Gebruik voor een CSS alleen, gebruik:

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