bootstrap-tagsinput form submited on press enter key

Question

in bootstrap-tagsinput on press enter key for next tag form is submitted! what is the solution?

$("#inputID").tagsinput();

Possible duplicate of [how prevent submit on press enter in twitter bootstrap typeahead plugin](http://stackoverflow.com/questions/13551668/how-prevent-submit-on-press-enter-in-twitter-bootstrap-typeahead-plugin) — BeliG, Oct 28 '16 at 14:12

score 10 · Accepted Answer · edited Jan 16 '17 at 23:25

First, you'll want to map 'Enter' to your tagsinput's confirmkeys option, then you'll need to call preventDefault() on your enter key to prevent the form from being submitted. In my solution, it only prevents submission by enter key while the user is focused in the tags input field.

To add a bit of redundancy, I also re-map the enter key to a comma in the input field, just to be sure.

  $('#tags-input').tagsinput({
    confirmKeys: [13, 188]
  });

  $('#tags-input input').on('keypress', function(e){
    if (e.keyCode == 13){
      e.keyCode = 188;
      e.preventDefault();
    };
  });

Just also an FYI, Enter key is mapped as 13, and comma is 188 in JS.

This has been really helpful. I'd like to add an update. I think comma keycode changed to 44 now. — Krishna Chaitanya Kornepati, Jun 26 '17 at 08:07

score 5 · Answer 2 · answered Mar 20 '19 at 10:17

5

Try this:

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

answered Mar 20 '19 at 10:17

bharat

1,336
1
16
29

Martin Zvarík · Answer 3 · 2018-08-23T18:04:09.297

3

Go to tagsinput.js

Find line:

self.$container.on('keypress', 'input', $.proxy(function(event) {

Before the end of this function add following:

if (event.which == 13) {
    return false; // dont submit form !!
}

edited Aug 23 '18 at 18:04

answered May 24 '18 at 12:33

Martin Zvarík

1,232
13
23

If the source is piece of sh*, I'd like to fix it. Have a beautiful day Jeff. – Martin Zvarík Aug 23 '18 at 18:03
2

Agreed 100%. The usual process is suggesting a fix and submit the fix with a PR though instead of editing the source directly. – tdelam Aug 23 '18 at 18:44

score 1 · Answer 4 · answered Aug 25 '16 at 10:32

1

Enter key is register for postback form . that's why a case has been happened that when you hit 'enter' key it trigger the 'postback' event so the form goes to submitted . solution : on page load reserve the enter key for tag input :

@using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { onkeydown = "return event.keyCode!=13" }))

if using asp.net mvc framework this is a simple example .

answered Aug 25 '16 at 10:32

Noni

377
2
14

The prevents the item from been added to the input in the first place – Shittu Joseph Olugbenga Feb 02 '21 at 12:34

score 0 · Answer 5 · answered Jul 07 '20 at 14:58

0

This work for me

$('.bootstrap-tagsinput input[type=text]').on('keydown', function (e) {
   if ( event.which == 13 ) {
           $(this).blur();
           $(this).focus();
           return false;
      }
 });

answered Jul 07 '20 at 14:58

msayubi76

396
2
10

score 0 · Answer 6 · answered Jul 17 '20 at 13:25

The cancelConfirmKeysOnEmpty option is set to true by default, but when set to false calls .preventDefault on the tag delimeter keydown event. Set it to false.

This solution also fixes the issue of a "carried comma".

cancelConfirmKeysOnEmpty: false,

// If the field is empty, let the event triggered fire as usual
if (self.options.cancelConfirmKeysOnEmpty === false) {
  event.preventDefault();
}

bootstrap-tagsinput form submited on press enter key

6 Answers6