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”键进入下一步。因此，我编写了以下代码来触发“输入”键上的“ #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 DOCS：https://api.jquery.com/focus/
JS文件：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

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

1 个答案: