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

Une autre méthode qui pourrait être utilisée en fonction des besoins $('input').onfocus(function(){this.blur()}); je pense que c'est comme cela que vous l'écririez. Je ne suis pas compétent en jquery.

Answer 2

Pour une solution utilisant uniquement le CSS, essayez de définir pointer-events: none sur l'entrée.

Answer 3

La meilleure solution est de désélectionner l'entrée une fois que l'utilisateur clique dessus, de sorte qu'elle devienne comme en lecture seule

  onFocus={e => e.target.blur()}

Answer 4

Balisage

Script

function preventInput(evnt) {
//Vérifié dans IE9, Chrome, FireFox
if (evnt.which != 9) evnt.preventDefault();}

Answer 5

J'aime en ajouter une qui fonctionne également avec la création dynamique du DOM en javascript comme D3 où il est impossible d'ajouter:

//.attr(function(){if(condition){"readonly"]else{""}) //CODE INCORRECT !

pour éviter les actions sur un élément DOM input HTML ajouter readonly à la classe:

var d = document.getElementById("div1");
d.className += " readonly";

Ou en D3:

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

ET ajouter au CSS ou less:

.readonly {
  pointer-events: none;
}

La bonne chose à propos de cette solution est que vous pouvez l'activer et la désactiver dynamiquement dans une fonction afin qu'elle puisse être intégrée par exemple dans D3 au moment de la création (pas possible avec le seul attribut "readonly").

pour supprimer l'élément de la classe:

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

ou utilisez Jquery:

$( "div" ).removeClass( "readonly" )

ou basculez la classe:

$( "div" ).toggleClass( "readonly", addOrRemove );

Juste pour être complet, bonne chance =^)