javascript - Preventing special character input to html text field - Stack Overflow

admin管理员组

文章数量:1289876

I have an input text field that needs to be limited as to what characters can be typed in. As one form of defense against faulty input, I'm trying to not even let the user type in incorrect things. The input can be [a-zA-Z-._] characters and is limited to 32 characters.

<input id="aliasEntry" type="text" maxlength="32">

As you can see, I've already got the 32 character limit figured out, and the user is prevented from typing any more after the limit has been reached. But I'm having a problem with preventing the input of incorrect characters.

I've tried using jquery's .keypress() and .keydown() event catchers to do things similar to the following:

$("#aliasEntry").keypress(function(e)
{
    var code = e.which || e.keyCode;
    // 65 - 90 for A-Z and 97 - 122 for a-z 95 for _ 45 for - 46 for .
    if (!((code >= 65 && code <= 90) || (code >= 97 && code <= 122) || code == 95 || code == 46 || code == 45))
    {
        var text = $("#aliasEntry").val();
        text = text.substring(0,text.length);
        $("#aliasEntry").val(text);
    }
});

But The problem with this is that the browsers always insert the typed character into the text box AFTER the event has been handled, which makes the code useless because the character I'm trying to eliminate hasn't been entered yet. Is there a way to simply prevent the browser from inserting the character into the text box after the user types it?

I have an input text field that needs to be limited as to what characters can be typed in. As one form of defense against faulty input, I'm trying to not even let the user type in incorrect things. The input can be [a-zA-Z-._] characters and is limited to 32 characters.

<input id="aliasEntry" type="text" maxlength="32">

As you can see, I've already got the 32 character limit figured out, and the user is prevented from typing any more after the limit has been reached. But I'm having a problem with preventing the input of incorrect characters.

I've tried using jquery's .keypress() and .keydown() event catchers to do things similar to the following:

$("#aliasEntry").keypress(function(e)
{
    var code = e.which || e.keyCode;
    // 65 - 90 for A-Z and 97 - 122 for a-z 95 for _ 45 for - 46 for .
    if (!((code >= 65 && code <= 90) || (code >= 97 && code <= 122) || code == 95 || code == 46 || code == 45))
    {
        var text = $("#aliasEntry").val();
        text = text.substring(0,text.length);
        $("#aliasEntry").val(text);
    }
});

But The problem with this is that the browsers always insert the typed character into the text box AFTER the event has been handled, which makes the code useless because the character I'm trying to eliminate hasn't been entered yet. Is there a way to simply prevent the browser from inserting the character into the text box after the user types it?

• javascript
• html
• validation

Share Improve this question Follow asked Aug 23, 2010 at 22:50 JDCJDC 8511 gold badge22 silver badges77 bronze badges 3

• 2 Remember to do server-side validation as well. Client validation is really easy to fool (turn off JavaScript on my browser in this case) – Nate Zaugg Commented Aug 23, 2010 at 23:02
• 2 When using jQuery, you don't have to normalize e.which again. – Marcel Korpel Commented Aug 23, 2010 at 23:06
• Keep in mind that it'd be best to have some UI explaining why the user's keyboard suddenly stopped working. – derobert Commented Dec 21, 2010 at 19:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You're using jQuery, so see this:http://api.jquery./event.preventDefault/. Just call e.preventDefault() if the character happens to be invalid, and this should prevent the default browser action from occurring, which in this case would be the insertion of a character.

Use your input like this

<input maxlength="32" onKeyUp="chText()" onKeyDown="chText()" id="aliasEntry"/>

and make chText() function on javascript write in it this code below

function chText()
{
    var str=document.getElementById("aliasEntry");
    var regex=/[^a-z]/gi;
    str.value=str.value.replace(regex ,"");
}

it will not allow any char to enter except a-z and A-Z

本文标签： javascriptPreventing special character input to html text fieldStack Overflow