i have a code here triggered by an onkeypress... i want it to alert whenever there is a special character typed. Aside from an alert, if the user will type a special character in a field, the typed special character should be erased and the focus should go back to the field. I can't seem to shake this problem. Can you help me? thanks in advance :D

function ei(e)
{
  var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
  for (var i = 0; i < e.value.length; i++) {
    if (iChars.indexOf(e.value.charAt(i)) != -1) {
      alert ("Please do not use special characters.");
      e.value = e.value-1;
      e.focus();
      return false;
    }
  }
}

this will be called in text field.. like this

<input type="text" name="name" onkeyup="ei(this)">

i have a code here triggered by an onkeypress... i want it to alert whenever there is a special character typed. Aside from an alert, if the user will type a special character in a field, the typed special character should be erased and the focus should go back to the field. I can't seem to shake this problem. Can you help me? thanks in advance :D

function ei(e)
{
  var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
  for (var i = 0; i < e.value.length; i++) {
    if (iChars.indexOf(e.value.charAt(i)) != -1) {
      alert ("Please do not use special characters.");
      e.value = e.value-1;
      e.focus();
      return false;
    }
  }
}

this will be called in text field.. like this

<input type="text" name="name" onkeyup="ei(this)">

• javascript
• validation

Share Improve this question Follow edited Mar 5, 2012 at 5:03 Jamison Dance 20.2k2525 gold badges102102 silver badges100100 bronze badges asked Mar 5, 2012 at 4:47 Jake PlarasJake Plaras 4311 gold badge44 silver badges1414 bronze badges 2

• 2 What happens if I hold down the . key? – Blender Commented Mar 5, 2012 at 4:51
• You can't use e.value = e.value-1 to remove the last character: the - operator is for numeric subtraction. You can use e.value = e.value.slice(0,-1) to remove the last character, but removing the last character isn't actually appropriate given that the cursor may not be at the end of the string (user may be inserting characters in the middle). – nnnnnn Commented Mar 5, 2012 at 4:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

There are a few weird things going on here.

1. You don't want to use the onkeyup attributes of HTML elements. Bind an event listener function, which keeps your code more modular.
2. Like others said, you can't use the subtraction operator like that.

3. You probably don't want to alert every time someone types an invalid character. That will only annoy and anger a user. I am just logging it to the console, but you should think about putting the error text next to the input element.

   $(function () {
     function ei(e) {
       var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
       for (var i = 0; i < this.value.length; i++) {
         if (iChars.indexOf(this.value.charAt(i)) != -1) {
           console.log("Please do not use special characters.");
           this.value = this.value.slice(0, this.value.length - 1);
           this.focus();
           return false;
         }
       }
     }
   
     $('#hurp').on('keyup', ei);
   });
   

And add an id to your input element:

<input type="text" name="name" id="hurp">​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

See this JSFiddle: http://jsfiddle/QgLcB/

Why would you bother using the keyup event? It'd be better off using the keydown or keypress event and then cancelling it (I used this site to find the keycodes):

function ei (event) {
    event = event || window.event;

    switch (event.keyCode) {
        case 47: //.
        case 33: //!
        //etc
            event.preventDefault(); //cancel the current action, which will stop it writing out to the textbox
            break;
        default:
            break;
    }
}

I would also suggest you look into jQuery rather than having inline JavaScript to hook up your events and also take a look at the jQuery Validation plugin as that should help take care of a lot of your code.

e.value = e.value-1; is not doing what you think.

You probably want to use substr()