javascript – 按下输入时如何将焦点移动到下一个字段？

2019-10-05 05:37:01 阅读：162 来源： 互联网

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

我用Google搜索,但这不起作用.为什么我的重点不转移到下一个领域？

$(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();

    }
});

*注意(来自评论)：它还需要处理没有设置tabindex值的页面

解决方法:

它失败,因为这是您的代码中的文档.

您想要使用当前焦点项目的索引(document.activeElement),或者如果您使用委派事件,则可以确保这是当前项目.

无论是否有tabindex,最终版本都有效.它也包裹着：

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

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

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

// 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();
    }
});

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

例如

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

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

这也使用了委托,监听文档上的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();
    }
});

标签：javascript,jquery,jquery-mobile
来源： https://codeday.me/bug/20191005/1855034.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 按下输入时如何将焦点移动到下一个字段？