Question

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

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

我在网上找不到任何可行的东西。我在论坛上搜寻过。

Answer 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
查找当前文本框
找到下一个
将焦点设置在那个

Answer 2

您应该使用：

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

Answer 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之外的元素。最好的方法是强制索引。

抱歉我的英语不好......

Answer 4

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

Answer 5

这是我提出的解决方案。我遇到的问题是我需要维护tabindex，即它必须与击中标签完全相同。它使用下划线和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);
}

Answer 6

Select FirstName, LastName, case when Q1 = 1801 then '1', when Q1 = 1802 then '2'....

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

Jquery在Enter Key Press上选择NEXT文本字段

7 个答案: