How to insert a TAG with Comma or Semicolon

Question

I found this project to insert TAGS in a form, but it only adds the TAG when enter key, and when it happens in my form it already sends! I would like to know what I should do in the SCRIPT so that it adds the TAG every time I insert comma or comma....

Example form:

SCRIPT CODE:

<script>
  $(document).ready(function() {
$('#addTagBtn').click(function() {
                $('#tags option:selected').each(function() {
                    $(this).appendTo($('#selectedTags'));
                });
            });
            $('#removeTagBtn').click(function() {
                $('#selectedTags option:selected').each(function(el) {
                    $(this).appendTo($('#tags'));
                });
            });
 $('.tagRemove').click(function(event) {
                event.preventDefault();
                $(this).parent().remove();
            });
            $('ul.tags').click(function() {
                $('#tags-field').focus();
            });
            $('#tags-field').keypress(function(event) {
                if (event.which == '13') {
                    if ($(this).val() != '') {
                        $('<li class="addedTag">' + $(this).val() + '<span class="tagRemove" onclick="$(this).parent().remove();">x</span><input type="hidden" value="' + $(this).val() + '" name="tags[]"></li>').insertBefore('.tags .tagAdd');
                        $(this).val('');
                    }
                }
            });

  });

</script>

Answer 1

The line that detects the enter is this:

if (event.which == '13') {

The Code of enter is 13, you can put other conditions:

if (event.which == 13 || event.which == 59 || event.which == 188  ) {

But it is important to note that this code of yours analyzes Keycodes, not characters. This may have some variation depending on the keyboard map used.

Note also that I removed the quotes, I do not understand the reason the original code compare with strings.

To tell you the truth, for what you want, you’d better get a script different, or adapt this to be based on string and not on the pressed key. For example, the enter number no longer works on it.

Here is a tool for online testing:
http://javascriptkeycodes.com/? debug

Test with keypad keys and the main keyboard to better understand the problem. Also test with ABNT2 and international keyboards, and you will notice that the code changes.

Answer 2

It is in this stretch

$('#tags-field').keypress(function(event) {
    if (event.which == '13' || event.which == '191' || event.which == '188') {
        //...
    }
});

13 is the code of the enter key, switch to 191 which is the semicolon code or 188 which is the comma code.

As (well) noted by Bacco, be careful because this validates the key code pressed and not the character itself, so it is subject to variations.