Supprimer le texte curseur/pointeur à partir de concentré readonly d'entrée
Je suis en utilisant un <input readonly="readonly">
, de style comme du texte normal pour supprimer l'apparition d'un système interactif de champ, mais toujours afficher la valeur.
C'est très utile pour empêcher un utilisateur d'éditer un champ, tout en étant en mesure de publier de la valeur. Je réalise que c'est une méthode pratique et qu'il y a 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, j'aimerais qu'il se comporte comme il le fait normalement, peut recevoir le focus, mais sans le clignotement du curseur.
Javascript solutions de bienvenue.
- Vous êtes en train d'abuser d'un contrôle d'entrée qui est conçu pour avoir les fonctionnalités dont il a besoin (comme l'accent l'accent circonflexe, soulignant etc). Toute sorte de hack n'est pas garanti dans les futures versions de navigateurs. La façon la plus propre de le faire serait d'utiliser une étiquette et un champ caché de soumettre la valeur.
- Avec cela à l'esprit, je pense que votre expérience de le signe indiquant quand le champ est en lecture seule n'est pas commun. Quel système d'exploitation/navigateur utilisez-vous? Je n'ai jamais vu un champ en lecture seule affiche un curseur sur n'importe quel Mac ou Windows navigateur; j'avoue que je n'ai pas fait de test non-Mac *nix navigateurs.
- Chrome ne montre pas de signe, le reste ne.
Vous devez vous connecter pour publier un commentaire.
Sur la mienne il n'y a aucun signe ou alors:
Prendre un coup d'oeil à ceci: http://www.cs.tut.fi/~jkorpela/forms/readonly.html
Désolé, maintenant, je comprends votre problème.
Essayez ceci:
disabled
empêche la présentation du champ, tandis quereadonly
ne le fait pas.<input id="someID" onfocus="this.blur()" readonly="readonly" />
- en fait, le code HTML approprié estreadonly="readonly"
🙂disabled
empêche également les événements de souris de feu sur l'entrée. Il désactive complètement elle.onfocus="this.attributes.readonly && this.blur()"
Vous pouvez l'utiliser dans vos css, mais il ne va pas se concentrer:
onclick
événement de se produire.Vous pouvez supprimer le clignotement du curseur par spécifier l'attribut css dans transparent
vous pouvez tester le résultat ici
Il peut être fait à l'aide de html et de javascript
ou jQuery
le seul moyen que j'ai trouvé pour cet été
Le onfocus/flou méthode fonctionne ok pour supprimer le curseur d'un champ en lecture seule, mais le navigateur ne prend pas automatiquement de se recentrer sur le champ suivant, et vous risquez de perdre le focus au total, ce qui n'est pas ce que l'utilisateur attend généralement. Donc, si cela est nécessaire, vous pouvez utiliser du javascript pour se concentrer sur le prochain champ que vous voulez, mais vous devez spécifier le champ suivant:
Où "NextField' est le nom du champ de goto. (Alternativement, vous pouvez fournir d'autres moyens pour localiser le champ suivant). Évidemment, ce n'est plus impliqué si vous souhaitez naviguer à certains non-visible élément de l'INTERFACE utilisateur, comme un onglet du panneau, car vous en aurez besoin pour organiser cela ainsi.
tabindex
de -1, de sorte qu'il ne pouvait pas être porté avec des raccourcis clavier.Facile!
Juste ajouter
disabled
à l'entrée et il ne sera pas cliquable (concentré)