CODEWITHSUNDEEP
javascriptvalidation
user228777
user228777

Reputation: 3094

Do not allow Paste any non alphanumeric characters

I don’t want user to allow pasting of any non Alphanumeric characters on a text box. How do I restrict this in Javascript? Thanks!!

Upvotes: 4

Views: 16279

Answers (6)

Deepak
Deepak

Reputation: 7917

You can use the onblur event of text box.

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

It will remove all value of text box when you input non alphanumeric value.

Upvotes: 2

sohtimsso1970
sohtimsso1970

Reputation: 3286

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

Docs for using OnPaste in IE

Docs for using OnPaste in Webkit

In JQuery, that would look like this:

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

That covers 75% of the browser market.

If you use JQuery, OnPaste is automatically normalized in Firefox so that it works there too. If you can't use JQuery, there is an OnInput event that works.

The working solution is to use a fast setTimeout value to allow the input's value property to be filled.

Basically 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 have 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 being removed.

Upvotes: 1

chryss
chryss

Reputation: 7519

Using jQuery, this is one way to do it:

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: As remarked in the comments, the original (using the .keyup() event) would have left open the possibility of pasting via the mouse context menu, so I've added a .blur() event. .change() would have been possible too, but there are reports of bugginess. Another option is using .focusout(). Time to experiment...

Upvotes: 7

Weston C
Weston C

Reputation: 3632

Assuming:

<textarea id="t1"/>

You could modify the onchange event handler for the textarea to strip out anything not alphanumeric:

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

Upvotes: 0

dmitko
dmitko

Reputation: 2657

It's better to validate form - check this great jQuery's 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 to tune thing!

Upvotes: 0

Peter Loron
Peter Loron

Reputation: 1156

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

Upvotes: 0

Related Questions