欧芹验证器中带有回车键的下一个按钮

Question

我将欧芹验证包用于两步表单。

这是html:

<form action="#" method="POST"  autocomplete="off" class="enter-form" data-parsley-validate="" data-parsley-focus="first">
    <div class="form-group form-section">
        <label for="email"><b>email or phone number:</b></label>
        <input type="text" title="enter email or phone number" autofocus="autofocus" tabindex="1" class="form-control" id="email" required="" data-parsley-emailorid="" />
    </div>
    <div class="form-group form-section">
        <label for="pwd"><b>password:</b></label>
        <input type="password" title="enter password" tabindex="2" class="form-control" id="pwd" required="" />
    </div>

    <div class="form-navigation">
        <button type="button" class="previous btn btn-primary pull-left">
            previous &gt;
        </button>
        <button type="button" class="next btn btn-primary pull-right" id="nextBtn">
            &lt; next
        </button>
        <button type="submit" class="btn btn-rang pull-right">
            enter
        </button>
        <span class="clearfix"></span>
    </div>

</form>

这是 java 用于多步验证的脚本：

$(document).ready(function () {
    var $sections = $('.form-section');

    function navigateTo(index) {
        $sections
        .removeClass('current')
        .eq(index)
        .addClass('current');
        $('.form-navigation .previous').toggle(index > 0);
        var atTheEnd = index >= $sections.length - 1;
        $('.form-navigation .next').toggle(!atTheEnd);
        $('.form-navigation [type=submit]').toggle(atTheEnd);
    }

    function curIndex() {
        return $sections.index($sections.filter('.current'));
    }

    $('.form-navigation .previous').click(function() {
        navigateTo(curIndex() - 1);
    });

    $('.form-navigation .next').click(function() {
        $('.enter-form').parsley().whenValidate({
            group: 'block-' + curIndex()
        }).done(function() {
            navigateTo(curIndex() + 1);
        });
    });

    $sections.each(function(index, section) {
        $(section).find(':input').attr('data-parsley-group', 'block-' + index);
    });
    navigateTo(0);
});

$(document).ready(function () {
    var dummyEmail = $('<input data-parsley-type="email">').parsley();
    var dummyDigits = $('<input data-parsley-pattern="\[0-9]{11}">').parsley();

    window.Parsley.addValidator('emailorid', {
        validateString: function(data) {
            return dummyDigits.isValid(true, data) || dummyEmail.isValid(true, data);
        },
        messages: {
            en: "Is neither a nine digit long number nor a valid email address"
        }
    });
});

在第一步中我无法使用 "enter" 键进入下一步。所以我写了这段代码来触发 "enter" 键上的“#nextBtn”：

$(document).ready(function () {
    var input = document.getElementById("email");

    input.addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            document.getElementById("nextBtn").click();
        }
    });
});

但是我现在有一个问题。当我使用 "enter" 键进入下一步时，它不关注密码输入。我的问题是：在使用 "enter" 键进入下一步时，如何专注于密码输入？

Answer 1

您可以通过以下方式获取密码输入：

document.getElementById("pwd").focus();

或 jQuery:

$('#pwd).focus();

因此，当您的 JavaScript 代码检测到按下回车时，只需聚焦 html 元素，然后使用 .focus() 函数。

Jquery 文档：https://api.jquery.com/focus/
JS 文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

欧芹验证器中带有回车键的下一个按钮

next button with enter key in parsley validator

javascript

eventtrigger

parsley

multi-step