javascript - 按下回车键时如何将焦点移到下一个字段？

Question

你能告诉我如何在按下回车键时将焦点移到下一个字段吗？我使用 dform 插件(将 JSON 转换为表单)。

我用谷歌搜索了它，但这不起作用。为什么我的注意力不转移到下一个领域？

JSFiddle:http://jsfiddle.net/5WkVW/1/

$(document).keypress(function(e) {
        if(e.which == 13) {
    
                // Do something here if the popup is open
                alert("dd")
                var index = $('.ui-dform-text').index(this) + 1;
                $('.ui-dform-text').eq(index).focus();
            
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form id="testSuiteConfigurationform" name="testSuiteConfigurationform" method="post" class="ui-dform-form" novalidate="novalidate">
    <label class="ui-dform-label">
        <h3>Configuration Parameters</h3>
    </label>
    <div class="ui-dform-div inputDiv">
        <fieldset class="ui-dform-fieldset">
            <input type="text" id="totalRetryCount" name="totalRetryCount" tabindex="1" onblur="validateElement('Configuration', 'testSuiteConfigurationform','totalRetryCount')" class="ui-dform-text valid">
            <legend class="ui-dform-legend">Total Retry Count</legend>
            <label for="totalRetryCount" class="checked">✔</label>
        </fieldset>
        <fieldset class="ui-dform-fieldset">
            <input type="text" id="totalRepeatCount" name="totalRepeatCount" tabindex="2" onblur="validateElement('Configuration', 'testSuiteConfigurationform','totalRepeatCount')" class="ui-dform-text">
            <legend class="ui-dform-legend">Total Repeat Count</legend>
        </fieldset>
        <fieldset class="ui-dform-fieldset">
            <select id="summaryReportRequired" name="summaryReportRequired" tabindex="3" onblur="validateElement('Configuration', 'testSuiteConfigurationform','summaryReportRequired')" class="ui-dform-select">
                <option class="ui-dform-option" value="true">true</option>
                <option class="ui-dform-option" value="false">false</option>
            </select>
            <legend class="ui-dform-legend">Summary Report Required</legend>
        </fieldset>
        <fieldset class="ui-dform-fieldset">
            <select id="postConditionExecution" name="postConditionExecution" tabindex="4" onblur="validateElement('Configuration', 'testSuiteConfigurationform','postConditionExecution')" class="ui-dform-select">
                <option class="ui-dform-option" value="ALWAYS">ALWAYS</option>
                <option class="ui-dform-option" value="ON_SUCCESS">ON_SUCCESS</option>
            </select>
            <legend class="ui-dform-legend">Post Condition Execution</legend>
        </fieldset>
    </div>
</form>

*注意(来自评论):它还需要在没有设置 tabindex 值的页面上工作

Answer 1

失败是因为 this 是您代码中的 document。

您想使用当前获得焦点的项目 (document.activeElement) 的索引，或者如果您使用委托(delegate)事件，您可以确保 this 是当前项目。

无论是否有 tabindexes，这个最终版本都有效。它还环绕着:

JSFiddle 1:http://jsfiddle.net/TrueBlueAussie/5WkVW/11/

JSFiddle 2:http://jsfiddle.net/TrueBlueAussie/5WkVW/12/

它们都使用我添加的名为 :focusable 的自定义 jQuery 选择器来选择所有可聚焦元素(包括链接):

// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input, [tabindex]');
    }
});

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(this) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});

如果愿意，您可以在事件处理程序中使用相同的自定义选择器。然后它甚至可以在 anchor 链接上工作(如果您将事件更改为 keydown 而不是 keypress):

例如

$(document).on('keydown', ':focusable', function (e) {

链接示例:http://jsfiddle.net/5WkVW/15/

这也使用委托(delegate)on，监听document 上的keydown 事件。 然后 应用 jQuery 选择器，然后 将函数应用到导致事件的任何匹配元素。这样效率更高，因为它只在事件时应用选择器(而不是将多个事件处理程序应用到每个 DOM 匹配元素)。

---

旧版本如下:

JSFiddle:http://jsfiddle.net/TrueBlueAussie/5WkVW/3/

$(document).keypress(function(e) {
    if(e.which == 13) {

            // Do something here if the popup is open
            //alert("dd")
            var index = $('.ui-dform-text').index(document.activeElement) + 1;
            $('.ui-dform-text').eq(index).focus();

    }
});

*注意:警报会干扰焦点，因此使用console.log 进行类似输出并在大多数浏览器的调试窗口(如 Chrome 的 F12 调试)中查看工具)。

更新:http://jsfiddle.net/TrueBlueAussie/5WkVW/4/

这个从最后一项回绕到第一项，也适用于选择(默认行为被阻止，因此您只能使用空格打开或向上/向下选择选项。

$('input,select').on('keypress', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
        console.log($next.length);
        if (!$next.length) {
            $next = $('[tabIndex=1]');
        }
        $next.focus();
    }
});

请求的“文档”版本:http://jsfiddle.net/TrueBlueAussie/5WkVW/5/

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
        console.log($next.length);
        if (!$next.length) {
            $next = $('[tabIndex=1]');
        }
        $next.focus();
    }
});