web-dev-qa-db-fra.com

Supprimer le curseur/curseur de texte de l'entrée en lecture seule focalisée

J'utilise un <input readonly="readonly">, stylisé en tant que texte normal pour supprimer l'apparence d'un champ interactif, tout en affichant la valeur.

Ceci est très utile pour empêcher un utilisateur de modifier un champ, tout en pouvant publier la valeur. Je me rends compte que c’est une méthode pratique et qu’il existe plusieurs solutions de contournement, mais j’aimerais utiliser cette méthode.

Problème: Le curseur clignotant apparaît toujours lorsque le champ est cliqué/concentré. (Au moins en FF et IE8 sur Win7)

Idéalement, j'aimerais qu'il se comporte comme d'habitude, qu'il puisse être mis au point, mais sans le signe clignotant.

Les solutions Javascript sont les bienvenues.

htmlcssformscaret
39
Wesley Murch

Sur le mien il n'y a pas de signe ou presque:

<input type="text" value="test" readonly="readonly" >

Jetez un oeil à ceci: http://www.cs.tut.fi/~jkorpela/forms/readonly.html

Désolé, maintenant je comprends votre problème.

Essaye ça:

<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
42
n3on

Vous pouvez utiliser ceci dans votre css, mais cela ne portera pas: 

[readonly='readonly'] {
   pointer-events: none;
}
8
Headache

Vous pouvez supprimer le curseur clignotant en spécifiant l'attribut css dans transparent

caret-color: transparent;

vous pouvez tester le résultat ici

5
Muhammad Husein

Cela peut être fait en utilisant HTML et JavaScript

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

ou jQuery

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

le seul moyen 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');
0
alecellis1985

La méthode onfocus/blur fonctionne bien pour supprimer le curseur d'un champ en lecture seule, mais le navigateur ne se reconcentre pas automatiquement sur le champ suivant et vous risquez de perdre le focus, ce que l'utilisateur n'attend généralement pas. Donc, si cela est nécessaire, vous pouvez utiliser du javascript simple pour vous concentrer sur le champ suivant que vous voulez, mais vous devez spécifier le champ suivant:

<input type="text" name="readonly-field" value="read-only" 
readonly onfocus="this.form.NextField.focus()">

Où 'NextField' est le nom du champ à lire. (Vous pouvez également fournir un autre moyen de localiser le champ suivant). Évidemment, ceci est plus complexe si vous souhaitez naviguer vers un élément non visible de l'interface utilisateur, tel qu'un panneau à onglets, car vous devrez également organiser cela.

0
andora

Facile!

Ajoutez simplement disabled à l'entrée et il ne sera pas cliquable

0
Tusko Trush