Jquery 在 Enter 键上选择 NEXT 文本字段答案

【问题标题】：Jquery select NEXT text field on Enter Key PressJquery 在 Enter 键上选择 NEXT 文本字段
【发布时间】：2011-06-06 16:23:08
【问题描述】：

我使用 jquery 创建了一个页面，在加载时它会自动选择第一个文本字段。我希望它在按下 ENTER 键时移动到下一个字段。

$('.barcodeField input').bind('keyup', function(event) {
    if(event.keyCode==13){
       $("this + input").focus();     
    }
});

我在网上找不到任何有效的东西。我已经搜索了论坛。

【问题讨论】：

很有趣，因为我回答了这样一个问题 :) stackoverflow.com/questions/4494552/…。此外，我建议不要这样做，因为用户习惯于使用 tab 转到另一个字段而不是 enter。
是的，我知道这对于网页来说是完全不行的，但这是针对使用条形码扫描仪的条形码映射系统，它以这种格式“，”+条形码+写入屏幕“输入”
查看链接到此example showing how to emulate enter as tab 的this answer。这是一个名为 PlusAsTab 的可重用插件，使用 CSS 类或 HTML5 data-* 属性来标记您想要该功能的字段/表单/容器。
这里有一个使用 nextAll 的答案：stackoverflow.com/questions/4494552/…

标签： javascript jquery html keyboard

【解决方案1】：

我创建了一个小功能，可以满足您的需求。这是我使用的版本，因此您可能需要更改类名，但您应该明白了。

<script type="text/javascript">
$(document).ready(function(){
$(".vertical").keypress(function(event) {
        if(event.keyCode == 13) { 
        textboxes = $("input.vertical");
        debugger;
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1]
            nextBox.focus();
            nextBox.select();
            event.preventDefault();
            return false 
            }
        }
    });
})
</script>

所以基本上：-

获取所有匹配.vertical的输入字段
查找当前文本框
寻找下一个
将焦点放在那个上

【讨论】：

如果你到达输入的末尾去索引0类似的东西，有什么想法吗？

【解决方案2】：

你应该使用：

$(this).next('input').focus();

【讨论】：

如果下一个兄弟是<input>，这将起作用，但如果它是<label> 或其他东西，它将找不到匹配项。

【解决方案3】：

试试这个：

(function($){
    $.fn.enterNext = function(){
       var _i =0;
       $('input[type=text], select',this)
            .each(function(index){
            _i = index;
            $(this)
                .addClass('tab'+index)
                .keydown(function(event){
                    if(event.keyCode==13){
                        $('.tab'+(index+1)).focus();
                        event.preventDefault();
                    }
                });

        })
     $( "input[type=submit]",this ).addClass('tab'+(_i+1));
}})(jQuery);

使用：

$('form.element').enterNext();

在我的情况下，这是我得到的最佳解决方案，因为函数 .next() 对其分支 DOM 之外的元素非常严格。最好的方法是强制索引。

对不起我的英语不好......

【讨论】：

【解决方案4】：

基本上，您只需要在顶部具有某种结构的 DOM 元素，以便您可以选择下一个。我建议利用 tabindex，但任何让你有一个定义的顺序的东西都可以工作。

【讨论】：

【解决方案5】：

这是我想出的解决方案。我遇到的问题是我需要维护 tabindex，即它的功能必须与点击 tab 完全相同。它同时使用下划线和 jquery。

我在调试代码中留下了：

try {
    var inputs = $("input[id^=tpVal-]");
    var sortedInputs = _.sortBy(inputs, function(element){
        var tabIndex = $(element).attr('tabindex');//debugging
        var id = $(element).attr('id');//debugging
        console.log(id +" | "+ tabIndex +" | "+ $(element));//debugging
        return parseInt($(element).attr('tabindex'));
    });
    $(sortedInputs).each(function (index, element) {
        $(element).keyup(function(event){
            if(event.keyCode==13) {
                var $thisElement = $(element);//debugging
                var nextIndex = index+1;//debugging
                var $nextElement = $(sortedInputs[nextIndex]);
                var thisId = $thisElement.attr('id');//debugging
                var nextId = $nextElement.attr('id');//debugging
                console.log("Advance from "+thisId+" to "+nextId);//debugging
                if($nextElement!=undefined) {
                    $(sortedInputs[index + 1]).focus();
                }
            }
        });
    });
} catch (e) {
    console.log(e);
}

【讨论】：

【解决方案6】：

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <input id="122" class='TabOnEnter' tabindex="1" /><br>
        <input id="123" class='TabOnEnter' tabindex="2" /><br>

         <input type="text" name="abc" /><br>
          <input type="text" name="abc1" /><br>
           <input type="text" name="abc2" /><br>
           <input type="text" name="abc3" class='TabOnEnter' tabindex="3" /><br>

        <input  class='TabOnEnter' tabindex="4" /><br>
        <input  class='TabOnEnter' tabindex="5" /><br>
        <input  class='TabOnEnter' tabindex="6" /><br>
<!--        <textarea class='TabOnEnter' tabindex="6">Hi, I am a test area</textarea>-->
        <input type="submit" value="submit" class='TabOnEnter' tabindex="7">


         <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            $(document).on("keypress", ".TabOnEnter", function (e)
            {
                //Only do something when the user presses enter
                if (e.keyCode == 13)
                {
                    var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
                    console.log(this, nextElement);
                    if (nextElement.length)
                        nextElement.focus()
                    else
                        $('[tabindex="1"]').focus();
                }
            });

//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut();  })
        </script>
    </body>
</html>

【讨论】：

【解决方案7】：

此代码适用于我

HTML：

<div class="row">
<div class="col-md-3"> Name </div>
<div class="col-md-3"> <input type="text" /> </div>
</div>
<div class="row">
<div class="col-md-3"> Email</div>
<div class="col-md-3"> <input type="email" /> </div>
</div>

jQuery 代码：

 $(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
      e.preventDefault();
      $(this).parent().parent().next('div').find('input').focus();
    }
  });

【讨论】：

如果下一个输入不是input 元素，这将不起作用。