web-dev-qa-db-fra.com

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

J'ai essayé:

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

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

});

mais il supprime le texte saisi légèrement après l’entrée d’une lettre. Est-il possible d'empêcher l'utilisateur de saisir du texte complètement sans avoir à désactiver le champ de texte?

javascriptjqueryhtml
59
Jacob

Une alternative non-Javascript qui peut être facilement négligée: pouvez-vous utiliser l'attribut readonly au lieu de l'attribut disabled? Cela empêche de modifier le texte dans l'entrée, mais les navigateurs attribuent un style différent à l'entrée (moins susceptible de le "griser") <input readonly type="text" ...>

133
Mike Mertsock

si vous ne voulez pas que le champ ait l'air "désactivé" ou normal, utilisez simplement ceci:

onkeydown="return false;"

il est fondamentalement le même que greengit et Derek a dit mais un peu plus court

55
Art
$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});
29
treecoder
$('input').keypress(function(e) {
    e.preventDefault();
});
15
Derek Hunziker

Si vous souhaitez empêcher l'utilisateur d'ajouter quoi que ce soit, mais donnez-lui la possibilité d'effacer des caractères:

<input value="CAN'T ADD TO THIS" maxlength="0" />

Définir l'attribut maxlength d'une entrée sur "0" fait en sorte que l'utilisateur ne puisse pas ajouter de contenu , mais efface le contenu à sa guise .

Mais si vous voulez que ce soit vraiment constant et immuable:

<input value="THIS IS READONLY" onkeydown="return false" />

Définir l'attribut onkeydown sur return false fait en sorte que l'entrée ignore l'utilisateur keypresses dessus, les empêchant ainsi de modifier ou d’affecter la valeur.

2
Eternal Darkness

utilisez simplement onkeydown = "return false" pour la balise de contrôle comme indiqué ci-dessous, elle n'acceptera pas les valeurs de l'utilisateur.

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>
1
anand360

Markup

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

Scénario

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}
1
Biju kalanjoor

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

0
qw3n

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

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

pour empêcher les actions sur un élément DOM d'entrée HTML, ajoutez en lecture seule à 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 moins:

.readonly {
  pointer-events: none;
}

ce qui est bien avec cette solution, c’est que vous pouvez l’activer de manière dynamique dans une fonction pour pouvoir l’intégrer par exemple dans D3 au moment de la création (impossible avec le seul attribut "readonly").

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 basculer la classe:

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

Juste pour être complet, bonne chance = ^)

0
irJvV

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

L’avantage de cette approche est que nous n’empêchons pas les comportements de clavier auxquels l’utilisateur s’attend (p. Ex. Onglet, page suivante ou précédente, etc.).

Un autre avantage est qu'il gère également le cas où la valeur d'entrée est modifiée en collant du texte dans le menu contextuel.

Cette approche fonctionne mieux si vous vous souciez uniquement de garder l'entrée vide. Si vous souhaitez conserver une valeur spécifique, vous devez effectuer le suivi ailleurs (dans un attribut de données?) Car elle ne sera pas disponible à la réception de l'événement input.

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

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});
<input type="text" />

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

0
JKS

si le texte apparaît avant keyup, il est probablement déclenché par un événement keydown. Avez-vous déjà essayé celui-là?

0
Anh Pham