forms - Enterキーを押して送信されたbootstrap-tagsinputフォーム

Question

bootstrap-tagsinputEnter キーを押して、次のタグ フォームを送信します。解決策は何ですか？

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

Answer 1

最初に、'Enter' をtagsinput'sconfirmkeysオプションにマップする必要があります。次にpreventDefault()、フォームが送信されないようにするために、Enter キーを呼び出す必要があります。私のソリューションでは、ユーザーがタグ入力フィールドにフォーカスしている間、Enter キーによる送信のみを防ぎます。

冗長性を少し追加するために、念のため、入力フィールドのエンター キーをカンマに再マップします。

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

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

参考までに、Enter キーは 13 としてマップされ、コンマは JS では 188 です。

Answer 2

Enter キーは postback form の登録です。そのため、「Enter」キーを押すと「postback」イベントがトリガーされ、フォームが submit になるというケースが発生しました。解決策：ページの読み込み時に、タグ入力用のEnterキーを予約します：

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

asp.net mvc フレームワークを使用している場合、これは簡単な例です。

Answer 3

これは私のために働きます

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