Limiting input to a set of characters while also displaying those characters
<p>I have seen in a few "username" fields where you type in a username, and below it, in something like a span, it will append it to a url.  A lot like what is happening as I type this in StackOverflow at the bottom.</p>

<p>I would like to show only allowed characters from a list, ignore any input of characters not in that list.</p>

<p>I am really new to JS. In this case, I am using Jquery, and have a sort of works with some parts, and other parts I do not, or I have not gotten there yet.</p>

<p>Desire:
Input form field accepts only characters from a list, others are ignored.
Get the new key as entered, and append it to an element.</p>

<p>Here is the mess I have so far:</p>

<pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
 $(document).ready(function() {
      $('#cart-name').keyup(function(e) {
           var entered = $('#cart-name').val();
           entered     = entered.toUpperCase();

           var allowed = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_';

           // fromCharCode always returns uppercase?
           var entered_char = String.fromCharCode(e.which);
           console.log('You entered: ' + entered_char);

           var pos = allowed.indexOf(entered_char);
           console.log('position is: ' + pos);


           if (pos &lt;= 0) {
                console.log('does not contain');
           } else {
                console.log('contains');
           }

           $('#live').text(entered);
           console.log(entered);
      });
 });
&lt;/script&gt;
</code></pre>

<p>In the html I have:</p>

<pre><code> &lt;input type="text" name="cart_name" value="" id="cart-name" autocomplete="off" /&gt;
 &lt;br /&gt;
 http://example.com/
 &lt;span id="live"&gt;&lt;/span&gt;
 &lt;br /&gt;
</code></pre>
