How to Stop the Enter Key From Submitting the Form

Markdownを表示

フォームでEnterキーを無効にしますか？このキーを無効にすべきかどうかについては多くの議論がありますが、調査の結果、サイトでこのキーを無効にするのが最善だと判断された場合は、この記事でフォームでEnterキーを無効にするために必要なコードを提供します。

Enterキーを無効にする

送信ボタン、次/前のページボタン、およびフォームのフィールド間を移動するためにEnterキーを使用することを含む、フォームでこのキーを無効にするには、このコードをコピーしてサイトに追加するだけです。

スニペットをサイトに追加する方法と場所についてサポートが必要な場合は、このチュートリアルを確認してください。

このコードは会話型フォームでは機能しないことに注意してください。

標準キーボードのEnterキーを表す数値を配置する必要があります。この数値は13であることがすでにわかっています。これらの数値とその意味についてさらに詳しく知りたい場合は、このドキュメントをご覧ください。

特定のWPFormsフォームの場合

/**
 * Disable the Enter key on a specific form 
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_specific_form( ) {
?>

    <script type="text/javascript">
        
        // Only run this snippet on the form ID 721
        jQuery( 'form#wpforms-form-721' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_specific_form', 30 );

上記のコードは、フォームIDwpforms-form-721を対象としています。このコードを独自のフォームIDに合わせて変更する必要があります。

フォームIDの見つけ方がわからない場合は、このチュートリアルを確認してください。

すべてのWPFormsフォームの場合

ただし、すべてのWPFormsフォームに追加したい場合は、以下のコードを使用してください。

/**
 * Disable the Enter key WPForms forms
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_all_wpforms( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_all_wpforms', 30 );

これで、このキーを無効にするために必要なすべてが揃いました。送信ボタンの色も変更しますか？送信ボタンの色を変更する方法のチュートリアルをご覧ください。

参照アクション

wpforms_wp_footer_end

よくある質問

Q: ページ区切りを使用しているときに次のボタンを無効にするにはどうすればよいですか？

A: WPFormsのページ区切りフィールドを使用しているときに、次のボタンと前のボタンを無効にするには、このスニペットを使用してください。

/**
 * Disable the enter key from going to the next page of a multi page form
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_stop_enter_submit_pagination( ) {
 ?>

<script type="text/javascript">
    jQuery(document)
        .off('keydown', '.wpforms-form input')
        .on('keydown', '.wpforms-form input', function(e) {
            if (e.keyCode === 13) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_stop_enter_submit_pagination', 30 );

Q: すべてのサイトフォームでEnterキーを無効にしたい場合はどうなりますか？

A: このスニペットは、WPFormsフォームまたはWordPressコメントフォームのいずれであっても、キーを無効にします。

/**
 * Disable the enter key from submitting the form for all forms on this WordPress site
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_key_any_form( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wp_footer', 'wpf_dev_disable_enter_key_any_form', 30 );

Q: スペースキーとEnterキーでフォームの送信を無効にできますか？

A: もちろんです！代わりにこのスニペットを使用してください。

/**
 * Disable the Enter and Space key on all WPForms forms
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */
 
function wpf_dev_disable_enter_space_keys_all_wpforms( ) {
?>
 
    <script type="text/javascript">
         
        // Run this snippet on all WPForms forms
        jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
			// 13 is to prevent the Enter key from submitting the form
			// 32 is to prevent the Space bar from submitting the form
            if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
				e.preventDefault();
				return false;
			}
        });
         
    </script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_space_keys_all_wpforms', 30 );

Enter キーによるフォーム送信を停止する方法

AI要約