欧芹验证器中带有enter键的next按钮

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代码在按enter时检测到时，只需将html元素聚焦，并使用.focus()函数即可。

Jquery：https://api.jquery.com/focus/

JS：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus