Javascript 如何使JQuery步骤形成使用键盘键前进和后退的形式

我已经创建了一个基于JQuery步骤的表单，但是当我单击按钮时，该表单才转到下一步。但是我想用键盘上的回车键来前进，用退格键来后退。不知道如何实现它

我的表单HTML是

 <div class="container">
            <form method="POST" id="signup-form" class="signup-form" action="#">
                <div>
                    <h3></h3>
                    <fieldset>
                        <input type="text" name="name" id="name" />
                        <label for="name" class="form-label">Full Name</label>
                    </fieldset>

                    <h3></h3>
                    <fieldset>
                        <input type="number" name="phone" id="phone" />
                        <label for="phone" class="form-label">Phone Number</label>
                    </fieldset>

                    <h3></h3>
                    <fieldset>
                        <input type="email" name="email" id="email" />
                        <label for="email" class="form-label">Email ?</label>
                    </fieldset>

                    <h3></h3>
                    <fieldset>
                        <label for="move_in_date" class="select-form-label">Move in Date</label>
                        <select id="move_in_date" name="move_in_date">
                        <option value="Within 60 Days">Within 60 Days</option>
                        <option value="After 60 Days">After 60 Days</option>
                        </select>

                    </fieldset>
                </div>
            </form>
        </div>

全名
电话号码
电子邮件？
入住日期
60天内
60天后

还有我的Javascript代码

<script>
(function($) {



    var form = $("#signup-form");
    form.validate({
        errorPlacement: function errorPlacement(error, element) {
             element.before(error); 
        },
        rules: {
            name : {
                required: true,
            },
            phone : {
                required: true,
            },
            email : {
                required: true,
            }
        },
        onfocusout: function(element) {
            $(element).valid();
        },
        highlight : function(element, errorClass, validClass) {
            $(element.form).find('.actions').addClass('form-error');
            $(element).parent().find('.form-label').addClass('form-label-error');
            $(element).removeClass('valid');
            $(element).addClass('error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element.form).find('.actions').removeClass('form-error');
            $(element).parent().find('.form-label').removeClass('form-label-error');
            $(element).removeClass('error');
            $(element).addClass('valid');
        }
    });
    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        labels: {
            previous : '<i class="fas fa-chevron-left"></i>',
            next : '<i class="fas fa-chevron-right"></i>',
            finish : '<i class="fas fa-chevron-right"></i>'
        },
        onStepChanging: function (event, currentIndex, newIndex)
        {
             // Always allow going backward even if the current step contains invalid fields!
      if (currentIndex > newIndex) {
        return true;
      }

      var form = $(this);

      // Clean up if user went backward before
      if (currentIndex < newIndex) {
        // To remove error styles
        $(".body:eq(" + newIndex + ") label.error", form).remove();
        $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
      }

      // Disable validation on fields that are disabled or hidden.
      form.validate().settings.ignore = ":disabled,:hidden";

      // Start validation; Prevent going forward if false
      return form.valid();
    },
        onFinishing: function (event, currentIndex)
        {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },
        onFinished: function (event, currentIndex)
        {
            form.parent().parent().append('<h1>Thanks, We will get back to you shortly.</h1>').parent().addClass('finished');
            form.submit();
            return true;
        },
        onStepChanged : function (event, currentIndex, priorIndex) {

            return true;
        }
    });

    jQuery.extend(jQuery.validator.messages, {
        required: "",
        remote: "",
        email: "",
        url: "",
        date: "",
        dateISO: "",
        number: "",
        digits: "",
        creditcard: "",
        equalTo: ""
    });
})(jQuery);
</script>

（函数（$）{
变量形式=$（“#注册形式”）；
form.validate({
errorPlacement：函数errorPlacement（错误，元素）{
元素。之前（错误）；
},
规则：{
姓名：{
要求：正确，
},
电话：{
要求：正确，
},
电邮：{
要求：正确，
}
},
onfocusout：函数（元素）{
$（元素）.valid（）；
},
突出显示：函数（元素、errorClass、validClass）{
$（element.form）.find（'.actions'）.addClass（'form-error'）；
$（element）.parent（）.find（'.form-label'）.addClass（'form-label-error'）；
$（元素）.removeClass（'valid'）；
$（元素）.addClass（'error'）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（element.form）.find（'.actions'）.removeClass（'form-error'）；
$（element）.parent（）.find（'.form-label'）.removeClass（'form-label-error'）；
$（元素）.removeClass（'error'）；
$（元素）.addClass（'valid'）；
}
});
表.儿童（“div”）.步骤({
头像：“h3”，
bodyTag:“字段集”，
过渡效果：“褪色”，
标签：{
以前的：''，
下一步：''，
完成：“”
},
onStepChanging:函数（事件、currentIndex、newIndex）
{
//即使当前步骤包含无效字段，也始终允许返回！
如果（currentIndex>newIndex）{
返回true；
}
变量形式=$（此）；
//如果用户在之前向后移动，请进行清理
如果（当前索引<新索引）{
//删除错误样式的步骤
$（“.body:eq（“+newIndex+”）label.error”，form.remove（）；
$（“.body:eq（“+newIndex+”）.error”，form.removeClass（“error”）；
}
//对禁用或隐藏的字段禁用验证。
form.validate（）.settings.ignore=“：disabled，：hidden”；
//开始验证；如果为false，则防止继续
返回表单.valid（）；
},
onFinishing：函数（事件、当前索引）
{
form.validate（）.settings.ignore=“：disabled”；
返回表单.valid（）；
},
onFinished：函数（事件、当前索引）
{
form.parent（）.parent（）；
表单提交（）；
返回true；
},
onStepChanged:函数（事件、当前索引、优先级索引）{
返回true；
}
});
extend（jQuery.validator.messages{
必填项：“”，
远程：“，
电邮：“，
url:“”，
日期：“，
日期：“，
编号：“，
数字：“，
信用卡：“，
埃奎尔托：“
});
})（jQuery）；

---

不确定如何实现关键字输入。正如我所希望的，每当用户填写字段并单击Enter键时，它都应该进入下一步。请指导我。

好吧，我找到了解决问题的办法。给你

jQuery('.signup-form').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    jQuery('a[href="#next"]').click();
    return false;  
  }
});