web-dev-qa-db-ja.com

フォームのEnterキーを無効にする

私は無効にしようとしています Enter フォームのキー。私が持っているコードを以下に示します。何らかの理由で、Enterキーがまだ送信をトリガーしています。コードは私の頭のセクションにあり、他のソースから正しいようです。

disableEnterKey: function disableEnterKey(e){
        var key;      
        if(window.event)
            key = window.event.keyCode; //IE
        else
            key = e.which; //firefox      

        return (key != 13);
    },
javascripthtmlwindow
30
Chris Pinski

jQueryを使用する場合、非常に簡単です。どうぞ

$(document).keypress(
  function(event){
    if (event.which == '13') {
      event.preventDefault();
    }
});
61
Steven Jiang

ほとんどの答えはjqueryにあります。これは、純粋なJavascriptで完璧に行うことができ、シンプルでライブラリは不要です。ここにあります：

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

このコードは、入力type = 'text'の "Enter"キー押下アクションのみを無効にするため、非常に機能します。これは、訪問者がテキストエリアおよびすべてのWebページで「Enter」キーを使用できることを意味します。 「Tab」キーのある「Submit」ボタンに移動して「Enter」を押すと、フォームを送信できます。

ハイライトは次のとおりです。

  1. それは純粋なjavascriptです（ライブラリは必要ありません）。
  2. 押されたキーをチェックするだけでなく、input type = 'text'フォーム要素で「Enter」がヒットしたかどうかも確認します。 （最も間違いの多いフォーム送信の原因
  3. 上記と合わせて、ユーザーは他の場所で「Enter」キーを使用できます。
  4. それは短く、きれいで、速く、要点までまっすぐです。

他のアクションに対しても「Enter」を無効にする場合は、console.log（e）を追加できます。テスト目的で、クロムでF12を押し、「コンソール」タブに移動してページの「バックスペース」を押し、その中を見てどの値が返されるかを確認し、それらのパラメーターをすべてターゲットにしてコードをさらに強化できます "e.target.nodeName"、 "e.target.type"などなど...

25
Tarik

これを試してください^^

$(document).ready(function() {
        $("form").bind("keypress", function(e) {
            if (e.keyCode == 13) {
                return false;
            }
        });
    });

お役に立てれば

19
Hatake Kakashi

あなたのフォームタグにこれを貼り付けてください：

onkeypress="return event.keyCode != 13;"

例

<input type="text" class="search" placeholder="search" onkeypress="return event.keyCode != 13;">

これは、Enterを入力して無視するときに検索を実行する場合に役立ちます。

/// Grab the search term
const searchInput = document.querySelector('.search')
/// Update search term when typing
searchInput.addEventListener('keyup', displayMatches)
5
YASH GAUTAMI

適切な入力要素に制限するjQueryでこれを達成する簡単な方法を次に示します。

//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
    if (e.which == 13) e.preventDefault();
});

この答えのおかげで： https://stackoverflow.com/a/1977126/560114 。

4
Matt Browne

JavaScript以外のソリューションの場合は、<button disabled>Submit</button>をフォームに追加し、他の送信ボタン/入力の前に配置します。 <form>開始タグ（およびCSSを使用して非表示にする、accesskey = '-1'を使用してタブシーケンスから外すなど）

AFAICT、 ユーザーエージェントは最初の送信ボタンを探す when ENTER 入力でヒットし、そのボタンが無効になっている場合、別のボタンの検索を停止します。

フォーム要素のデフォルトのボタンは、フォーム所有者がそのフォーム要素であるツリー順で最初の送信ボタンです。

ユーザーエージェントがユーザーにフォームの暗黙的な送信をサポートする場合（たとえば、一部のプラットフォームでは、テキストフィールドに暗黙的にフォーカスがあるときに「Enter」キーを押すと、フォームを暗黙的に送信します）動作により、ユーザーエージェントはそのデフォルトボタンで合成クリックアクティベーションステップを実行する必要があります。

したがって、デフォルトのボタンが無効になっている場合、そのような暗黙の送信メカニズムが使用されている場合、フォームは送信されません。 （無効になっているボタンにはアクティベーション動作はありません。）

https://www.w3.org/TR/html5/forms.html#implicit-submission

ただし、ここでは Safari 10 MacOS が正しく動作せず、デフォルトのボタンが無効になっている場合でもフォームを送信します。

したがって、javascriptを想定できる場合は、<buttononclick="return false;">Submit</button>代わりに。に ENTER、onclickハンドラーが呼び出され、falseを返すため、送信プロセスが停止します。私がこれをテストしたブラウザーは、ブラウザーの検証も行いません（最初の無効なフォームコントロールに焦点を合わせ、エラーメッセージを表示するなど）。

2
Erics

JQueryを使用する場合は、このようなものを試すことができます。

$("form").bind("keydown", function(e) {
   if (e.keyCode === 13) return false;
 });

キーダウンが完了するまで待機します Enter、それは何もしません。

1
Jaime Rodriguez

HTMLコードの<Head>タグに次のコードを追加するだけです。フォーム上のすべてのフィールドのキー入力時にフォームを送信します。

<script type="text/javascript">
    function stopEnterKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
    }
    document.onkeypress = stopEnterKey;
</script>
1
Kailas Mane

上記のすべてのソリューションをチェックしましたが、機能しません。唯一可能な解決策は、フォームの各入力に対して「onkeydown」イベントをキャッチすることです。ページのオンロードまたはjquery ready（）を介してdisableAllInputsをアタッチする必要があります。

/*
 * Prevents default behavior of pushing enter button. This method doesn't work,
 * if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of
 * the input. So method should be attached directly to the input 'onkeydown'
 */
function preventEnterKey(e) {
    // W3C (Chrome|FF) || IE
    e = e || window.event;
    var keycode = e.which || e.keyCode;
    if (keycode == 13) { // Key code of enter button
        // Cancel default action
        if (e.preventDefault) { // W3C
            e.preventDefault();
        } else { // IE
            e.returnValue = false;
        }
        // Cancel visible action
        if (e.stopPropagation) { // W3C
            e.stopPropagation();
        } else { // IE
            e.cancelBubble = true;
        }
        // We don't need anything else
        return false;
    }
}
/* Disable enter key for all inputs of the document */
function disableAllInputs() {
    try {
        var els = document.getElementsByTagName('input');
        if (els) {
            for ( var i = 0; i < els.length; i++) {
                els[i].onkeydown = preventEnterKey;
            }
        }
    } catch (e) {
    }
}
1
Dimon579

解決策はとても簡単です：

タイプ「送信」をボタンに置​​き換えます

<input type="button" value="Submit" onclick="this.form.submit()" />
0
Samir Patel