ホームページ  >  記事  >  バックエンド開発  >  フォームを送信せずにEnterキーを押し、PHPでフォームを送信する方法

フォームを送信せずにEnterキーを押し、PHPでフォームを送信する方法

PHPz
PHPzオリジナル
2023-03-27 16:16:17797ブラウズ

フォームを作成する際、ユーザーが入力ボックスで Enter キーを押すとフォームが自動的に送信されるという状況に遭遇することがよくありますが、誤操作や情報損失などの問題が発生しやすくなります。

この記事では、ユーザーのニーズに応えるために、フォームを送信せずに Enter キーを押す方法と、PHP でフォームを送信する 2 つの方法を実装する方法を紹介します。

1. フォームを送信せずに入力します

1. JavaScript を使用して達成します
JavaScript を使用して、ユーザーがボタンを押したときにフォームが自動的に送信されないようにすることができます。サーバーへのキーを入力します。コードは次のとおりです:

<script>
    document.onkeydown = function(event) {
        var e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13 && e.target.tagName.toLowerCase() != 'textarea') {
            //阻止表单提交
            return false;
        }
    }
</script>

2. jQuery を使用して

を実装する さらに、jQuery のPreventDefault() メソッドを使用してフォームの送信を防ぐこともできます。コードは次のとおりです:

<script>
    $(document).on('keydown', function(event) {
        if (event.keyCode == 13 && event.target.tagName.toLowerCase() != 'textarea') {
            event.preventDefault();
        }
    });
</script>

2. Enter キーを押してフォームを送信します

ユーザーが入力後に Enter キーを押してフォームを自動的に送信するようにしたい場合は、これは 2 つの方法で実現されます。

1. JavaScript を使用して実装します

テキスト ボックス内の Enter キーのイベントをリッスンし、ユーザーが Enter キーを押したときにフォーム送信イベントをトリガーできます。コードは次のとおりです。

<script>
    function submitForm() {
        document.formName.submit(); //提交表单
    }

    document.getElementById('input').onkeydown = function(event) {
        var e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13) {
            submitForm();
        }
    }
</script>

2. HTML5 の form 属性を使用する

HTML5 では、form 属性を使用して入力ボックスをフォームにバインドできるため、ユーザーが Enter キーを押したときに、入力ボックスに入力すると、フォームが自動的に送信されます。コードは次のとおりです。

<form action="submit.php" method="post">
    <input type="text" id="input" name="input" form="myform" />
    <button type="submit" form="myform">提交</button>
</form>

この例では、入力ボックスの form 属性はフォーム ID を指し、送信ボタンの form 属性もフォーム ID を指します。このようにして、ユーザーが Enter キーを押すと、入力ボックスの内容がサーバーに送信されます。

概要

Web フォームを作成するときは、ユーザーの行動習慣を考慮する必要があり、ユーザー エクスペリエンスを向上させる必要があります。この記事では、フォームを送信せずに Enter キーを押す方法と、PHP で Enter キーを押してフォームを送信する 2 つの方法を実装する方法を紹介します。この記事が少しでもお役に立てれば幸いです。

以上がフォームを送信せずにEnterキーを押し、PHPでフォームを送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。