title: Block characters from input text field, mirror input into span or div
body: <p>I have some html</p>
  
  <pre><code>&lt;input type="text" name="name" value="" id="name"&gt;
  &lt;div id="preview"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The rules for entry into the field:</p>
  
  <ul>
  <li>Letters A-Z a-z 0-9 space and dash, no other characters allowed<br /></li>
  <li>Entry of forbidden characters should do nothing<br /></li>
  </ul>
  
  <p>The rules for the div:</p>
  
  <ul>
  <li>Show each characters as it is entered into the input field<br /></li>
  <li>Do not show characters that are forbidden<br /></li>
  <li>When a space is encountered, show it as a dash<br /></li>
  </ul>
  
  <p>I have had various potions working, not working, or misbehaving.  This version seems to work in all cases I can test other than backspace/delete is non functional.  Only tested in Safari so far.</p>
  
  <p>There are other "gotcha" areas, like entering in text in-between already entered text, select all, using the arrow keys, all these play a role in this problem.  </p>
  
  <pre><code> $(document).ready(function(){
    $('#name').keypress(function(e) {
     // get key pressed
     var c = String.fromCharCode(e.which);
     // var d = e.keyCode? e.keyCode : e.charCode; // this seems to catch arrow and delete better than jQuery's way (e.which)
     // match against allowed set and fail if no match
     var allowed = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890- ';
     if (e.which != 8 &amp;&amp; allowed.indexOf(c) &lt; 0) return false; // d !== 37 &amp;&amp; d != 39 &amp;&amp; d != 46 &amp;&amp; 
     // just replace spaces in the preview
     window.setTimeout(function() {$('#preview').text($('#name').val().replace(/ /g, '-'));}, 1);
    });
   });
  </code></pre>
  
  <p>If there is a way to put a monetary bounty on this post, let me know.  Yes, that is where I am at with this one :)</p>