web-dev-qa-db-fra.com

Comment empêcher l'utilisateur de coller du texte dans une zone de texte?

J'ai cette fonction JS qui empêche l'utilisateur de taper des caractères

<script type="text/javascript">
function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode(key);
  var regex = /[0-9]|\./;
  if(!regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
</script>

<span>Radio Receive:</span>
<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="${cpCon.receiveNo}" required tabindex="34" />

Mais j'ai remarqué que lorsque l'utilisateur a essayé de coller un mot à partir de cette zone de texte, le texte peut être entré. Comment puis-je empêcher cela sans désactiver la pâte?

javascripthtmlvalidation
22
PeterS

Solution très simple:

<input name="ReceiveNo" type="text" class="txtbox" onkeypress='validate(event)' maxlength="11" value="${cpCon.receiveNo}" required tabindex="34" onCopy="return false" onDrag="return false" onDrop="return false" onPaste="return false" autocomplete=off />

Cela a très bien fonctionné pour moi. Personne ne peut maintenant coller dans votre zone de texte en utilisant l'option de collage du bouton droit de la souris ou en appuyant sur ctrl + v à partir du clavier.

38
arefin2k

// Pour désactiver la fonctionnalité de collage

$(document).ready(function(){
  $('#txtInput').bind("paste",function(e) {
      e.preventDefault();
  });
});

// Ci-dessous Un peut être utile pour vos fonctionnalités.

$(document).ready(function(){
  $('#txtInput').bind("paste",function(e) {
    validate(e);
  });
});

o

OnTabOut() ou onblur() vous pouvez valider le texte entré/collé au lieu de gérer la fonctionnalité de collage.

24
Mallikarjuna Reddy

J'ai essayé cela dans mon Angular et cela a bien fonctionné sans jQuery.

<input type='text' ng-paste='preventPaste($event)'>

Et dans la partie script:

$scope.preventPaste = function(e){
   e.preventDefault();
   return false;
};

Dans un projet non angular, utilisez 'onPaste' au lieu de 'ng-paste' et 'event' au lieu de '$ event'.

5
Abhishek

Si vous avez simplement besoin de kendoComboBox () non modifiable, vous pouvez utiliser à la place kendoDropDownList ().

Dans mon cas, j'avais besoin qu'il soit activé/désactivé en fonction des privilèges de l'utilisateur, alors voici la solution que j'ai trouvée (cela empêche les entrées de clé et les valeurs de collage):

if (user.hasRight()) {

  var myinput = $("#myinput").data("kendoComboBox");
  myinput.input.on("keydown", function (e) { e.preventDefault(); });
  myinput.input.bind("paste", function (e) { e.preventDefault(); });

}

Vous pouvez le tester ici

1
Chtiwi Malek