web-dev-qa-db-ja.com

Drupal 7オートコンプリートフィールドでEnterキーを押すと送信を無効にする

Drupal 7で、ノード編集フォームのオートコンプリートフィールド（私の場合、具体的にはエンティティ参照オートコンプリートフィールド）内にいる場合）で、Enterキーを押すとフォーム全体が送信されます。

この動作を無効にするにはどうすればよいですか？

entitiesajax
5
ouni

これは、ユーザーがオートコンプリートオプションを選択するためにEnterキーを押すことを可能にする、素晴らしいソリューションです。

<script>
(function($) {

Drupal.behaviors.ACChangeEnterBehavior = {
  attach: function(context, settings) {
    $('input.form-autocomplete', context).once('ac-change-enter-behavior', function() {
      $(this).keypress(function(e) {
        var ac = $('#autocomplete');
        if (e.keyCode == 13 && typeof ac[0] != 'undefined') {
          e.preventDefault();
          var fauxEvent = $.Event('mousedown'); // Create an event to trigger
          $('li.selected', ac).trigger(fauxEvent);
        }
      });
    });
  }
}

})(jQuery);
</script>

注：これは、オートコンプリートドロップダウンが表示されている場合にのみ、Enterの動作をオーバーライドします。それ以外の場合は、Enterキーを押すと通常の動作になります（フォームを送信します）。

ただし、任意の入力フィールドでEnterを使用してフォームの送信を中止する場合は、以下を試してください。

<script>
(function($) {

Drupal.behaviors.DisableInputEnter = {
  attach: function(context, settings) {
    $('input', context).once('disable-input-enter', function() {
      $(this).keypress(function(e) {
        if (e.keyCode == 13) {
          e.preventDefault();
        }
      });
    });
  }
}

})(jQuery);
</script>
3
hargobind

回答＃2のもう少し簡潔なバージョン（偽のイベントは必要ありません）。

<script>
!(function ($) {
  'use strict';
  Drupal.behaviors.ACChangeEnterBehavior = {
    attach: function (context, settings) {

      // Prevent the autocomplete from triggering the submit event.
      $('input.form-autocomplete', context).once('ac-change-enter-behavior').keypress(function (e) {
        if (e.keyCode === 13 && this !== undefined) {
          e.preventDefault();
        }
      });

    }
  };
}(jQuery));
</script>
1
user2653893

多くのフィールドでEnterキーを押すと、フォームの送信がトリガーされます。この動作を無効にできる唯一の方法は、これまでと同じようにカスタムJSを使用することです。

0
Mac_Weber