jquery.token-field demo

Tokenized <INPUT>

Source

<input type='text' id='input-test' name='emails'
        value='one@first.net,two@second.net,three@third.net,four@fourth.net,five@fifth.net'/>
<script>
$('#input-test').tokenField();
</script>

Result

Tokenized <TEXTAREA>

Source

<textarea id='textarea-test' name='emails'>
one@first.net,two@second.net,three@third.net,four@fourth.net,five@fifth.net
</textarea>
<script>
$('#textarea-test').tokenField();
</script>

Result

one@first.net,two@second.net,three@third.net,four@fourth.net,five@fifth.net

Tokenized <INPUT> with maximum of 3 tokens

Source

<input type='text' id='max-test' name='emails'
        value='one@first.net,two@second.net,three@third.net,four@fourth.net,five@fifth.net'/>
<script>
  $('#max-test').tokenField({
    max:3, tooMany:function() {alert('you already entered 3 addresses'); $(this).val('');}
  });
</script>

Result

Tokenized <INPUT> with phone number regex

Source

<input type='text' id='phone-test' name='numbers' value='555-1212,(123) 555-1212'/>
<script>
$('#phone-test').tokenField({regex:/^(?:\([0-9]{3}\) ?)?[0-9]{3}\-[0-9]{4}$/});
</script>

Result

Tokenized <INPUT> with word regex

Source

<input type='text' id='word-test' name='words' value='abc123,hello,foo-bar,no spaces,underscore_ok'/>
<script>
$('#word-test').tokenField({regex:/^[a-z][\w\-]+$/i});
</script>