web-dev-qa-db-ja.com

Twitterでのプレス入力での送信を防ぐ方法bootstrap typeaheadプラグイン

入力テキストがあり、アイテムを提案するために先行入力プラグインを適用しますが、入力テキストでEnterキーを押すと、フォームが送信されます。

Twitter bootstrap typeaheadプラグインを使用してフォームの送信を防ぐにはどうすればよいですか？

jquerytwitter-bootstrapform-submitpreventdefault
14
paganotti

IDを追加し、次のように入力のキーダウンイベントを削除するだけで、その特定の入力をターゲットにできます。

[〜＃〜] js [〜＃〜]

$(document).ready(function() {
  $('form input').keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
22
Andres Ilich

最初の答えは、おそらくtypeaheadプラグインを更新したために機能しませんでしたが、typeheadによって作成された「代替」入力を使用して問題を解決しました。

$(".Twitter-typeahead > input").focus(function(){
    //disable btn when focusing the input
    $("#my_submit_button").prop('disabled', true);
}).blur(function(){
    //enable btn when bluring the input
    $("#my_submit_button").prop('disabled', false);
});
3
Tarek

documentation によると、オプションconfirmKeysをreturn（13）以外の値に設定できます。

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

ただし、これを実行するためのより賢い方法は、 Enter時にフォームを送信しないようにする です。

2
adrien

これに取り組むために私が見つけた最善の方法は、送信入力を使用しないことです。代わりにボタン入力を使用し、クリックされたときにフォームを送信するためにいくつかのjsを追加します。

$('#my_submit_button').click(function(){
    $(this).parents('form').submit();
});
1
Jim Ready

CodeIgniterを使用したプロジェクトで同じ問題が発生し、bootstrapここで解決策が見つかり、機能します。

次のように、フォームにonsubmit="return false;"を追加するだけです。

<form id="frmcrud" method="post" onsubmit="return false;">
0
Zulqarnain