如何使用jQuery将焦点移动到下一个输入?

时间:2010-03-16 14:38:15

标签: jquery autocomplete

我正在使用jQuery的自动完成插件,它运行正常。但是,在IE中,当用户选择自动完成中的项目时,焦点不会移动到下一个输入字段。当然它适用于Firefox。该插件没有内置解决方案,但确实提供了“选项”。有没有办法可以强制它移动到下一个输入字段?

15 个答案:

答案 0 :(得分:91)

您可以这样做:

$("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq( inputs.index(this)+ 1 ).focus();
});

此处发布的其他答案可能对您不起作用,因为它们依赖于下一个输入是下一个兄弟元素,而事实并非如此。这种方法适用于表单并搜索下一个输入类型元素。

答案 1 :(得分:27)

JQuery UI已经有了这个,在我下面的例子中我包含了一个maxchar属性,专注于下一个可聚焦的元素(输入,选择,textarea,按钮和对象),如果我输入最大字符数

HTML:

text 1 <input type="text" value="" id="txt1" maxchar="5" /><br />
text 2 <input type="text" value="" id="txt2" maxchar="5" /><br />
checkbox 1 <input type="checkbox" value="" id="chk1" /><br />
checkbox 2 <input type="checkbox" value="" id="chk2" /><br />
dropdown 1 <select id="dd1" >
    <option value="1">1</option>
    <option value="1">2</option>
</select><br />
dropdown 2 <select id="dd2">
    <option value="1">1</option>
    <option value="1">2</option>
</select>

的Javascript

$(function() {
    var focusables = $(":focusable");   
    focusables.keyup(function(e) {
        var maxchar = false;
        if ($(this).attr("maxchar")) {
            if ($(this).val().length >= $(this).attr("maxchar"))
                maxchar = true;
            }
        if (e.keyCode == 13 || maxchar) {
            var current = focusables.index(this),
                next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
            next.focus();
        }
    });
});

答案 2 :(得分:11)

Sam的意思是:

$('#myInput').focus(function(){
    $(this).next('input').focus();
})

答案 3 :(得分:7)

尝试使用以下内容:

            var inputs = $(this).closest('form').find(':focusable');
            inputs.eq(inputs.index(this) + 1).focus();

答案 4 :(得分:5)

为什么不简单地将输入字段放在要跳转到id的位置并进行简单的聚焦

$("#newListField").focus();

答案 5 :(得分:1)

您可以发布一些HTML作为示例吗?

在平均时间内,试试这个:

$('#myInput').result(function(){
    $(this).next('input').focus();
})

这是未经测试的,因此可能需要进行一些调整。

答案 6 :(得分:1)

我刚刚编写了一个jQuery插件,可以满足您的需求(我自己也找不到解决方案而感到恼火(tabStop - &gt; http://plugins.jquery.com/tabstop/

答案 7 :(得分:1)

  function nextFormInput() {
      var focused = $(':focus');
      var inputs = $(focused).closest('form').find(':input');
      inputs.eq(inputs.index(focused) + 1).focus();
  }

答案 8 :(得分:1)

使用eq获取特定元素。

有关index

的文档

$("input").keyup(function () {
   var index = $(this).index("input");		 	
   $("input:eq(" + (index +1) + ")").focus(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />

<input type="text" maxlength="1"  />

<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />

答案 9 :(得分:0)

如果您在脚本中使用event.preventDefault(),则将其注释掉,因为IE不喜欢它。

答案 10 :(得分:0)

最简单的方法是将它从选项卡索引中一起删除:

$('#control').find('input[readonly]').each(function () {
    $(this).attr('tabindex', '-1');
});

我已经在几种形式上使用它了。

答案 11 :(得分:0)

以下是我的案例。可能会降低性能。

$('#myelement').siblings('input').first().focus();

答案 12 :(得分:0)

var inputs = $('input, select, textarea').keypress(function (e) {
  if (e.which == 13) {
    e.preventDefault();
    var nextInput = inputs.get(inputs.index(this) + 1);
    if (nextInput) {
      nextInput.focus();
    }
  }
});

答案 13 :(得分:0)

您用它

$(document).on("keypress","input,select",function (e) {
    e.preventDefault();
    if (e.keyCode==13) {
        $(':input:eq(' + ($(':input').index(this) + 1) +')').focus();
    }
});

答案 14 :(得分:-2)

onchange="$('select')[$('select').index(this)+1].focus()"

如果您的下一个字段是另一个字段,则可能会有效。