Block characters from input text field, mirror input into span or div
<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>
