Ne laissez pas coller des caractères non alphanumériques

Question

Je ne veux pas l'utilisateur pour permettre le collage de tous les caractères non alphanumériques sur une zone de texte. Comment puis-je limiter cela en Javascript? Merci!

Answer 1

Vous pouvez utiliser l'événement onblur de zone de texte.

function remove() 
{ 
    var otxt=document.getElementById('txt1'); 

var val=otxt.value; 

for(i=0;i<val.length;i++) 
    { 
    var code=val.charCodeAt(i); 
    if(!(code>=65 && code<=91) && !(code >=97 && code<=121) && !(code>=48 && code<=57)) 
     { otxt.value=""; return ; }  

    } 
} 


<input type="text" id="txt1" onblur="remove();" /> 

Il supprimera toute valeur de la zone de texte lorsque vous saisissez une valeur non alphanumérique.

Answer 2

Je ne sais pas comment vous pouvez empêcher le collage, mais vous pouvez filtrer le contenu soit sur le soumettre ou sur l'événement de changement.

Answer 3

Il est préférable de valider le formulaire - vérifiez le plugin de ce grand jQuery - http://docs.jquery.com/Plugins/Validation/ et vous pouvez utiliser la règle du "nombre": http://docs.jquery.com/Plugins/Validation/Methods/number. Vraiment simple et facile à régler!

Answer 4

En utilisant jQuery, c'est une façon de le faire:

HTML:

​<form name='theform' id='theform' action=''> 
<textarea id='nonumbers' cols='60' rows='10'> </textarea> 
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

JavaScript:

$().ready(function(){ 
    $("textarea#nonumbers").keyup(removeextra).blur(removeextra); 
}); 
function removeextra() { 
    var initVal = $(this).val(); 
    outputVal = initVal.replace(/[^0-9a-zA-Z]/g,"");  
    if (initVal != outputVal) { 
     $(this).val(outputVal); 
    } 
}; 

Try it out here.

EDIT: Comme le fait remarquer dans les commentaires, l'original (en utilisant l'événement .keyup()) aurait laissé ouverte la possibilité de coller via le menu contextuel de la souris, j'ai donc ajouté un événement .blur(). .change() aurait été possible aussi, mais il y a des rapports de bugginess. Une autre option utilise .focusout(). Le temps d'expérimenter ...

Answer 5

En supposant:

<textarea id="t1"/> 

Vous pouvez modifier le gestionnaire d'événements onchange pour le textarea de dépouiller quoi que ce soit non alphanumérique:

document.getElementById('t1').onchange = function() { 
    this.value = this.value.replace(/\W/,''); 
} 

Answer 6

Pourquoi ne l'a suggéré d'utiliser OnPaste événement? Cela est entièrement pris en charge dans IE, Safari et Chrome.

Docs for using OnPaste in IE

Docs for using OnPaste in Webkit

En JQuery, qui ressemblerait à ceci:

$(input).bind("paste", function(e){ RemoveNonAlphaNumeric(); }) 

qui couvre 75% du marché des navigateurs.

Si vous utilisez JQuery, onpaste est normalisé automatiquement dans Firefox pour que cela fonctionne aussi. Si vous ne pouvez pas utiliser JQuery, un événement OnInput fonctionne.

La solution de travail est d'utiliser une valeur setTimeout rapide pour permettre à remplir la propriété de la valeur de l'entrée.

Fondamentalement comme ceci:

$("input").bind("paste", function(e){RemoveAlphaChars(this, e);}); 

function RemoveAlphaChars(txt, e) 
{ 
    setTimeout(function() 
    { 
     var initVal = $(txt).val(); 

     outputVal = initVal.replace(/[^0-9]/g,""); 

     if (initVal != outputVal) 
      $(txt).val(outputVal); 
    },1); 
} 

J'ai testé dans IE, Chrome et Firefox et il fonctionne bien. Le délai d'expiration est si rapide que vous ne pouvez même pas voir les caractères supprimés.