Do not insert any non-alphanumeric characters

Question

I do not want the user to allow the insertion of any non-alphanumeric characters in the text box. How to limit this in javascript? Thanks!!

Answer 1

You can use the onblur event of the text field.

 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();" /> 

If you enter a non-alphanumeric value, the entire value of the text field will be deleted.

Answer 2

Using jQuery, this is one way to do this:

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 here.

EDIT: As noted in the comments, the original (using the .keyup () event) would leave open the option of pasting through the context menu of the mouse, so I added the .blur () .. change () event would be possible, but there are bug reports. Another option is to use .focusout (). Time to experiment ...

Answer 3

I'm not sure how you can prevent pasting, but you can filter the content in either the submit message or the change event.

Answer 4

Better check the form - check out this great jQuery plugin - http://docs.jquery.com/Plugins/Validation/ , and you can use the number rule: http://docs.jquery.com/Plugins/Validation/Methods/ number . Really simple and easy setup!

Answer 5

Assuming that:

 <textarea id="t1"/> 

You can change the onchange event onchange for the text field to cut out anything non-alphanumeric:

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

Answer 6

Why no one suggested using the OnPaste event? This is fully supported in IE, Safari and Chrome.

Documents for Using OnPaste in IE

Documents for Using OnPaste in Webkit

In jQuery, it will look like this:

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

This covers 75% of the browser market.

If you use jQuery, OnPaste is automatically normalized in Firefox, so it works there too. If you cannot use jQuery, there is an OnInput event that works.

A working solution is to use the quick setTimeout value, which allows you to populate the input value property.

Mostly like this:

 $("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); } 

I tested this in IE, Chrome, and Firefox, and it works well. The timeout is so fast, you can’t even see the characters that are deleted.