Limiting input to a set of characters while also displaying those characters

Question

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.

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

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.

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.

Here is the mess I have so far:

<script type="text/javascript" charset="utf-8">
 $(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 <= 0) {
                console.log('does not contain');
           } else {
                console.log('contains');
           }

           $('#live').text(entered);
           console.log(entered);
      });
 });
</script>

In the html I have:

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

Answer 1

Looking at your comments, you have some confusion over the different Key events:

keyup (and keydown) tell you which physical key has been pressed, while keypress will tell you which character has been typed - which is why you're always getting uppercase letters from fromCharCode.

I'm using something like this to sort out urls:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#cart-name').keypress(function(e) {
      var entered = $('#cart-name').val();

      // Regular Express to perform match on all alphanumeric characters,
      // and - and _
      var matchPattern = /[\w/_/-]/g;

      var entered_char = String.fromCharCode(e.which);
      console.log('You entered: ' + entered_char);

      if (entered_char.match(matchPattern)) {
        $('#live').text(entered + entered_char);
      }
      else if (enteredKey == " ") {
        // Replace spaces with hyphens for SEO
        $('#live').text(entered + "-");
      }    

    });
 });
</script>

Should see you right.

Answer 2

Why not use a regular exprsession to replace non alphanumeric characters?

entered = entered.replace(/[^a-zA-Z 0-9]+/g,'');