Supprimer le curseur/pointeur de texte de l'entrée focalisée en lecture seule
J'utilise un <input readonly="readonly">, stylisé en texte normal pour supprimer l'apparence d'un champ interactif, mais toujours afficher la valeur.
Ceci est très utile pour empêcher un utilisateur de modifier un champ, tout en étant capable de publier la valeur. Je me rends compte que c'est une méthode pratique et qu'il existe plusieurs solutions de contournement, mais je veux utiliser cette méthode.
Problème:, Le curseur clignotant apparaît encore lorsque le champ est cliqué/concentré. (Au moins dans FF et IE8 sur Win7)
Idéalement, je voudrais qu'il se comporte comme il le fait normalement, focusable, mais sans le curseur clignotant.
Solutions Javascript bienvenue.
6 réponses
Sur le mien, il n'y a pas de caret ou plus:
<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.
Essayez ceci:
<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
Vous pouvez l'utiliser dans votre css, mais il ne se concentrera pas:
[readonly='readonly'] {
pointer-events: none;
}
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();
});
Vous pouvez supprimer le curseur clignotant en spécifiant l'attribut css dans transparent
caret-color: transparent;
Vous pouvez tester le résultat ici
Le seul moyen que j'ai trouvé pour cela é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');
La méthode onfocus / blur fonctionne correctement pour supprimer le curseur d'un champ en lecture seule, mais le navigateur ne se focalise pas automatiquement sur le champ suivant, et vous risquez de perdre complètement le focus, ce qui n'est pas ce que l'utilisateur attend habituellement. Donc, si cela est nécessaire, vous pouvez utiliser Javascript pour vous concentrer sur le champ suivant, 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 à goto. (Alternativement, vous pouvez fournir d'autres moyens pour localiser le champ suivant). Évidemment, cela est plus impliqué si vous voulez naviguer vers un élément D'interface utilisateur non visible, comme un panneau d'onglets, car vous devrez également l'organiser.