title: Jquery Remove Character from Input - working with a slight issue
body: <p>I've written a small bit of jquery that checks an array as the user enters details into a form field.</p>
  
  <p>I've set it so values in the array and what the user types are both checked as lowercase, this is working fine.</p>
  
  <p>I've now added a line to allow me to stop the users entering invalid characters. </p>
  
  <p>Again this works but has a slight issue in that it stops the use of the left &amp; right arrows to move back and forth between characters in the input field.</p>
  
  <p>and I don't know why !!</p>
  
  <pre><code>$(function(){
   $("input[name='name[]']").bind("change keyup", function() {
      var val = $(this).val().toLowerCase();
      $(this).val($(this).val().replace(/[$@#!£]/, ''));
      var names = ['rod','jane','freddy'];
      var names = $.map(names, function(n,i){return n.toLowerCase();});
      var results = ($.inArray(val, names) != -1) ? "GREY" : "WHITE";
      $(this).css("background-color", results);
    });
  });
  </code></pre>
  
  <p>and I've created a <strong><a href="http://jsfiddle.net/rhJ2n/" rel="nofollow">FIDDLE</a></strong> that shows what happens.</p>
  
  <p>If I remove the following line it works, but the invalid characters are then allowed. </p>
  
  <pre><code>$(this).val($(this).val().replace(/[$@#!£]/, ''));
  </code></pre>
  
  <p>How can I get this to work but allow the arrow keys to work ?</p>
  
  <p>Thanks</p>