I have this jQuery which stops the enter key from being pressed and I have prepared it to accept an array of disallowed keypresses..

    $('.form input').bind('keypress', function(e) {
        var keys = [13];
        for (var i = keys.length; i--;){
            if(e.keyCode===keys[i]){
                return false;
            }
        }
    });

I want to do similar thing with the | character, but since it is shift of 220 and I don't need to stop \ from being entered into the form, how do I restrict that character or use a modifier key? (will also be processing it out server-side, of course).

I'm also aware that keyboard layout for special characters may differ from keyboard to keyboard with different localization, so it may be necessary to focus on the resulting character rather than the key itself (not entirely sure on that), but I don't want to introduce a large amount of overhead

I have this jQuery which stops the enter key from being pressed and I have prepared it to accept an array of disallowed keypresses..

    $('.form input').bind('keypress', function(e) {
        var keys = [13];
        for (var i = keys.length; i--;){
            if(e.keyCode===keys[i]){
                return false;
            }
        }
    });

I want to do similar thing with the | character, but since it is shift of 220 and I don't need to stop \ from being entered into the form, how do I restrict that character or use a modifier key? (will also be processing it out server-side, of course).

I'm also aware that keyboard layout for special characters may differ from keyboard to keyboard with different localization, so it may be necessary to focus on the resulting character rather than the key itself (not entirely sure on that), but I don't want to introduce a large amount of overhead

• javascript
• jquery
• forms
• keyboard
• jquery-events

• 3 There are special keys for shift. e.shiftKey. stackoverflow./questions/3781142/… – dweiss Commented May 1, 2012 at 14:20
• There are special keys for shift. For your purposes, you could use e.shiftKey. This SO Q+A explains using shift: stackoverflow./questions/3781142/…. You can bine e.shiftKey with the keycode check for \, where \ plus shift = |. As others are stating, this would only work on standard US layouts and whatever other keyboards support shift+\=| and these codes. – dweiss Commented May 1, 2012 at 14:20
• Depends on the keyboard. – kapa Commented May 1, 2012 at 14:21
• As far as I know, the pipe (|) is 124 while backslash (\) is 92. – kapa Commented May 1, 2012 at 14:23
• you could use regular expressions instead? – Piotr Kula Commented May 1, 2012 at 14:26

5 Answers 5

The keypress event is about characters, not keys. You can just pare keyCode to the character code for "|" ("|".charCodeAt(0)) directly, no need to worry about the shift key being down (and it may not be on all keyboards).

Example - live copy | source:

HTML:

<p>Try to type | in the box below.</p>
<input id="theInput" type="text" size="80">

JavaScript:

jQuery(function($) {

  var keys = [13, "|".charCodeAt(0)];
  $("#theInput").keypress(function(e) {
    var index;

    for (index = 0; index < keys.length; ++index) {
      if (keys[index] === e.keyCode) {
        display("Denied!");
        return false;
      }
    }
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

Or as bažmegakapa points out, since you're already using jQuery, you can use its inArray function:

jQuery(function($) {

  var keys = [13, "|".charCodeAt(0)];
  $("#theInput").keypress(function(e) {
    if ($.inArray(e.keyCode, keys) !== -1) {
      display("Denied!");
      return false;
    }
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

The keycode for the pipe is 124 so this should simply work:

$('.form input').bind('keypress', function(e) {
    var keys = [13, 124];
    for (var i = keys.length; i--;){
        if(e.keyCode===keys[i]){
            return false;
        }
    }
});​

Check out the demo

If you are using jQuery anyways, you could make use of the inArray() method:

$('.form input').bind('keypress', function(e) {
    var keys = [
        13, // enter
        124 // |
    ];
    return $.inArray(e.keyCode, keys) === -1;
});​

In conclusion the best solution ever would be:

var keys = [13, "|".charCodeAt(0)];
$(".form input").keypress(function(e) {
    return $.inArray(e.keyCode, keys) === -1;
});

You can check if e.shiftKey is true, but that'll require you to modify your array. Personally I'd use something like:

var mod = {
    NONE:0,
    SHIFT:1,
    CTRL:2,
    ALT:4
};
var keys = [
    [13,mod.NONE], // enter, no mod
    [220,mod.SHIFT] // \ with Shift = |
];
for( var i=keys.length; i--;) {
    if( e.keyCode === keys[i][0] && (e.shiftKey + 2*e.ctrlKey + 4*e.altKey) === keys[i][1]) {
        return false;
    }
}

If you are simply looking to not include a specific character (or even set of characters), I think a better way is to remove any restricted characters from the form value.

$('.form input').keyup(function(e){ $(this).val( $(this).val().replace("|", "" ) ); });