CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
gespinha
gespinha

Reputation: 8487

How to submit a tag with Bootstrap Tags Input plugin with space key?

I'm building a form with a field that is using the Bootstrap Tags Input plugin. This plugin inputs a tag once the user clicks the Enter key.

Can anyone help use the documentation of the plugin to input a tag once the user puts a "," (comma) or a space in the field?

Here is the documentation - http://timschlechter.github.io/bootstrap-tagsinput/examples/

2020 edit: heres the doco: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Upvotes: 5

Views: 8398

Answers (3)

Julián D'Ambrosio
Julián D'Ambrosio

Reputation: 51

The custom confirmKeys didn't work for me as it always works with enter and comma. My solution allows you to enter words separated by spaces and then hit enter to generate the tags:

$(control).on('itemAdded', function (event) {
    let items = event.item.split(' ');           

    if (items.length > 1) {
        $(control).tagsinput('remove', event.item, { preventPost: true });
        items.map(function (item, i) {              
            $(control).tagsinput('add', item);
        });
    }
});

Upvotes: 0

Nick.Mc
Nick.Mc

Reputation: 19194

I couldn't get confirmKeys to work. No error, it just made no difference to operation.

My root problem was that enter was submitting the form instead of creating the tag.

This issue solved it for me:

https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/625

Code reproduced here:

$('.bootstrap-tagsinput input').keydown(function (event) {
    debugger;
    if ( event.which == 13) {
        $(this).blur();
        $(this).focus();
        return false;
    }
})

If the field recieves enter, it removes and returns focus.

return false stops the enter key event bubbling up to the form.

With regards to using space, you should be able to use event.which == 32 but that doesn't function for some reason.

EDIT:

After this I noticed that even when I removed the code, enter worked as required

Then I noticed the cancelConfirmKeysOnEmpty option. So I guess my original form just wasn't set up properly

Upvotes: 1

DavidG
DavidG

Reputation: 118977

You need to specify the confirmKeys parameter. From the documentation the default is to only have keycode for enter (13), but you can add the code for comma (44) and space (32) like this:

$('input').tagsinput({
    confirmKeys: [13, 32, 44]
});

Upvotes: 18

Related Questions