javascript - 如何使 JQuery Steps 表单使用键盘键前进和后退
问题描述
我创建了一个基于 JQuery Steps 的表单,但是当我单击按钮时,表单只会转到下一个。但我想使用键盘回车键来前进和退格键来实现后退功能。不知道如何实现它。
我的表单 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>
还有我的 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>
不确定如何实现关键字输入。正如我希望每当用户填写该字段并单击 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;
}
});
推荐阅读
- html - Visual Studio:Html 文件生成 ResX 错误
- reactjs - 反应身份高阶组件
- ios - 适用于 iOS 应用的具有多个捆绑标识符的 URL 类型
- selenium - 读取 HKLM\SOFTWARE\Policies\Google\Chrome\MachineLevelUserCloudPolicyEnrollmentToken 失败:系统找不到指定的文件。(0x2)
- database - 如何在 oracle 数据库中创建表并使用 python sqlalchemy 将数据插入其中?
- ios - 使用共享的 Instace 方法禁用 UIButton
- laravel - Laravel 插件开发
- .net - 查找重复项的更好方法
- java - 如何将方法的字符串参数更改为未知的类类型
- ios - 用于 iOS 应用的具有多个捆绑标识符的 URL 类型