CODEWITHSUNDEEP
javascriptjqueryformskeyboardjquery-events
Damon
Damon

Reputation: 10799

Stop characters being typed into form

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

Upvotes: 4

Views: 2405

Answers (5)

T.J. Crowder
T.J. Crowder

Reputation: 1073968

The keypress event is about characters, not keys. You can just compare 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);
  }
});

Upvotes: 6

kapa
kapa

Reputation: 78671

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;
});​

Upvotes: 4

noob
noob

Reputation: 9202

In conclusion the best solution ever would be:

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

Upvotes: 0

kinadian
kinadian

Reputation: 238

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

Upvotes: -2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

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;
    }
}

Upvotes: -2

Related Questions