web-dev-qa-db-fra.com

HTML: le curseur apparaît dans le texte d'entrée en lecture seule?

Disons que nous avons une zone de texte en lecture seule, comme ceci:

<input type="text" readonly />

Dans IE 9 et FF 4, lorsque je clique sur ce champ, un curseur (non clignotant) apparaît dans le champ. Dans Chrome, cependant, le curseur ne s'affiche pas. (Voyez par vous-même à http://jsfiddle.net/hqBsW/ .)

Je suppose que je comprends pourquoi IE/FF choisit d'afficher le curseur pour que l'utilisateur sache qu'il peut toujours sélectionner la valeur dans le champ.

Néanmoins, cela est évidemment déroutant pour nos utilisateurs et nous aimerions changer IE/FF pour ne pas afficher le curseur, comme Chrome le fait pour les champs readonly).

Y a-t-il un moyen de faire cela?

htmlinputreadonly
23
user979672

Cela ressemble à un bug!

Il y a n bug similaire (396542) ouvert avec Mozilla, en disant que le curseur devrait clignoter dans readonly entrées - mais ce comportement semble mauvais, un curseur clignotant est censé signifier, "vous pouvez taper ici."

Vous devriez commenter ce bogue et/ou en déposer de nouveaux (avec Mozilla ici et avec Microsoft ici )!

En attendant, utiliser disabled ou changer le comportement avec JavaScript, comme l'a suggéré @ nikmd23, semble être la meilleure solution.

7
s4y

Ma solution, à partir de l'extrait jQuery de nikmd23 mais avec la fonction blur () qui semble mieux fonctionner

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

Exemple ici: http://jsfiddle.net/eAZa2/

N'utilisez pas l'attribut "désactivé" car l'entrée ne sera pas soumise lorsqu'elle fait partie d'un formulaire

19
Frank

Si vous changez l'attribut readonly en disabled, vous ne pourrez pas cliquer dans la zone de saisie et vous n'aurez donc pas de curseur.

Selon le navigateur, vous ne pourrez peut-être pas sélectionner le texte non plus.

J'ai fourni des exemples des différents états d'entrée ici: http://jsfiddle.net/hqBsW/1/

Une autre alternative est que vous pouvez forcer une sélection de texte lorsque l'utilisateur se concentre sur un élément d'entrée donné. Ce changement de comportement de contrôle indiquerait plus facilement à l'utilisateur le fait que la saisie est restreinte et lui permet de copier très facilement si tel est le cas d'utilisation finale.

En utilisant jQuery, vous écririez le code de sélection comme ceci:

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

J'ai mis à jour l'exemple pour montrer ce comportement en action: http://jsfiddle.net/hqBsW/2/

7
nikmd23

Cela peut être fait en utilisant html et javascript

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

ou globalement en utilisant jQuery

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

Pour un correctif CSS uniquement, utilisez:

input[readonly] {
  pointer-events: none;
}
2
Mohammed Erraysy

la seule façon que j'ai trouvé pour c'était

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

Vous pouvez utiliser css:

input {pointer-events:none;}

Référence: https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

0
Laxman Paikaray