Comment empêcher l'utilisateur de taper dans un champ de texte sans désactiver le champ?

Question

J'ai essayé :

$('input').keyup(function() {

   $(this).attr('val', '');

});

mais cela supprime le texte saisi peu de temps après qu'une lettre soit saisie. Y a-t-il un moyen d'empêcher complètement l'utilisateur de saisir du texte sans avoir recours à la désactivation du champ de texte ?

Answer 1

Il suffit d'utiliser onkeydown="return false" sur la balise de contrôle comme indiqué ci-dessous, elle n'acceptera pas les valeurs de l'utilisateur.

Answer 2

Une option est de lier un gestionnaire à l'événement input.

L'avantage de cette approche est que nous ne bloquons pas les comportements du clavier que l'utilisateur attend (par exemple, tabulation, page suivante/précédente, etc.).

Un autre avantage est qu'elle gère également le cas où la valeur de l'entrée est modifiée en collant du texte via le menu contextuel.

Cette approche fonctionne mieux si vous ne vous préoccupez que de maintenir l'entrée vide. Si vous souhaitez conserver une valeur spécifique, vous devrez la suivre ailleurs (dans un attribut de données ?) car elle ne sera pas disponible lorsque l'événement input est reçu.

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});

Testé dans Safari 10, Firefox 49, Chrome 54, IE 11.