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();

Among

I am facing the same issue ... have you found any solution. – Draghound

which backend framework you use ? share sample code ?? – Veronikaveronike

Possible duplicate of how prevent submit on press enter in twitter bootstrap typeahead plugin – Abut

Answer 1

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.

Probe

This has been really helpful. I'd like to add an update. I think comma keycode changed to 44 now. – Teresitateressa

Answer 2

Try this:

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

Baikal

Answer 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 !!
}

Ingmar

If the source is piece of sh*, I'd like to fix it. Have a beautiful day Jeff. – Flashcube

Agreed 100%. The usual process is suggesting a fix and submit the fix with a PR though instead of editing the source directly. – Seignior

Answer 4

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 .

Veronikaveronike

The prevents the item from been added to the input in the first place – Houseline

Answer 5

This work for me

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

Catatonia

Answer 6

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();
}

Guidance