Comment empêcher l'utilisateur de taper dans le champ de texte sans désactiver le terrain?
J'ai essayé:
$('input').keyup(function() {
$(this).attr('val', '');
});
mais il supprime le texte entré peu après une lettre est entré. Est-il de toute façon à empêcher l'utilisateur d'entrer du texte complètement sans avoir recours à la désactivation du champ de texte?
- est
keydown()
oukeypress()
plus efficace?
Vous devez vous connecter pour publier un commentaire.
Un non-Javascript alternative qui peut être facilement négligé: pouvez-vous utiliser le
readonly
attribut au lieu de ladisabled
attribut? Il empêche de modifier le texte dans l'entrée, mais les navigateurs style de l'entrée différemment (moins susceptibles de "gris it out")par exemple,
<input readonly type="text" ...>
readonly
sur l'entréesi vous ne voulez pas le champ à regarder "désactivé" ou qch, il suffit d'utiliser cette:
c'est essentiellement le même que greengit et Derek dit, mais un peu plus court
e.preventDefault();
dans la méthode addEventListeneronkeydown="return false"
Si vous souhaitez empêcher les utilisateurs d'ajouter quoi que ce soit, mais de leur fournir la possibilité d'effacer des caractères:
HTML:
Réglage de la
maxlength
attribut d'une entrée à"0"
fait en sorte que l'utilisateur ne peut pas ajouter de contenu, mais encore effacer le contenu qu'ils souhaitent.Mais Si vous voulez qu'il soit vraiment constante et immuable:
HTML:
Réglage de la
onkeydown
attributreturn false
rend l'entrée ignorer l'utilisateur appuis sur les touches sur ce, les empêchant ainsi de changer ou de modifier la valeur.Une autre méthode qui pourrait être utilisée selon les besoins
$('input').onfocus(function(){this.blur()});
je pense que c'est la façon dont vous l'écrire. Je ne suis pas compétent dans jquery..focus
, mais cela a résolu mon problème!Balisage
Script
Je tiens à ajouter une qui fonctionne également avec les dynamiques javascript DOM création comme D3 où il est impossible d'ajouter:
pour empêcher des actions sur une entrée HTML de l'élément DOM ajouter readonly: classe:
OU en D3:
ET ajouter des feuilles de style CSS ou moins:
la bonne chose à propos de cette solution est que vous pouvez dynamiquement l'allumer et de en fonction de sorte qu'il peut être intégré, par exemple, en D3 lors de la création (pas possible avec le single "readonly" attribut).
pour supprimer l'élément de la classe:
ou utiliser Jquery:
ou activer /désactiver la classe:
Juste pour être complet, bonne chance =^)
suffit d'utiliser onkeydown="return false" à la balise de contrôle comme indiqué ci-dessous, il ne sera pas accepter les valeurs de l'utilisateur.
si le texte s'affiche avant keyup, alors il est probablement déclenchée de l'événement keydown. Avez-vous essayer encore?
Une option est de se lier à un gestionnaire à l'
input
événement.L'avantage de cette approche est que nous ne nous empêche pas de clavier comportements qui attend l'utilisateur (par exemple, l'onglet, la page haut/bas, etc.).
Un autre avantage est qu'il gère également le cas lorsque la valeur d'entrée est modifié par le collage de texte dans le menu contextuel.
Cette approche fonctionne mieux si vous ne se soucient que de garder l'entrée vide. Si vous voulez maintenir à une valeur spécifique, vous devez suivre que quelque part d'autre (dans un attribut de données?) depuis il ne sera pas disponible lorsque le
input
événement est reçu.JS:
HTML:
Testé un Safari de 10, Firefox 49, Chrome 54, IE 11.