Arrow keys navigation within a text field

Question

Arrow key (left and right) is not navigating within a text field. Also placing a cursor within a text field and editing is not possible. Cursor jumps to the last every time I start adding a character. It works fine in firefox but not working in Chrome and IE. Code is as below.

$('#idname').bind('keyup blur', function(){ 
  $(this).val( $(this).val().replace(/[^a-z A-Z 0-9]/g,'') ); 
});

Am using jquery version 1.3.

Answer 1

You should wrap the parameter in val() width a function like in this fiddle http://jsfiddle.net/robbiebardijn/Z4p48/

    $(this).val( function(){ 
      $(this).val().replace(/[^a-z A-Z 0-9]/g,'')
    }); 

That function also accepts 2 parameters and you should return your altered value.

this comes from the doc:

$('input').on('blur', function() {
  $(this).val(function( i, val ) {
    return val.toUpperCase();
  });
});