Question

$(function(){
    $('input[name="username"]').keydown(function(key){
        if (jQuery.inArray(key.keyCode, 
            [8,37,39,48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90])
             == -1 || key.shiftKey ){
                return false;
        }
    });
});

What this does is Ajax validation on the text characters, it only lets me enter letters from a-z and 0-9, and not any other characters, but i want it to allow me the _ (underscore) character as well.

Answer 1

$('input[name="username"]').keypress(function(event) {
  var k = event.which;
  /* 0:      non-input keys
     8:      backspace
     48-57:  0-9
     97-122: a-z
     95:     _ */
  if (k != 0 && k != 8 && k != 95 &&
      (k < 48 || k > 57) && (k < 97 || k > 122))
    return false;
});

$('input[name="username"]').keyup(function() {
  var inp = $(this).val();

  if (inp.match(/[^a-z0-9_]/g))
    $(this).val(inp.replace(/[^a-z0-9_]/g, ''));
});

The keypress event handler tries to catch invalid characters before they are input into the field, to prevent a distracting ‘jumping’ effect when invalid characters are shown and on keyup are removed again. Note that event.which contains the character code, normalized by jQuery.

The keyup handler is necessary to catch characters that are input using Ctrl-V (note that it unfortunately doesn’t catch input using the menu option Edit > Paste). The extra test is necessary to stop the input field from getting back to its most left position after every keyup (caused by changing its value). Now it only resets its position when there is something to be removed.

You can test it on JSBin.