Question

我有多个文本框，例如

<input type="text" id="text1" onkeypress="goNext(event,this.id);"/>
<input type="text" id="text2" onkeypress="goNext(event,this.id);"/>
<input type="text" id="text3" onkeypress="goNext(event,this.id);"/>

这里我试图做一个函数，当我在任何文本框中按 Enter 键时，焦点将转到下一个元素。我写了一个JavaScript函数：

function goNext(evt, obj) {
    var curEle = obj;
    if (typeof evt == 'undefined' && window.event) {
        evt = window.event;
    }
    if (evt.keyCode == 13) {      
        $(curEle).next().focus();
    }
}

这不起作用。怎么解决这个？我在函数id中添加alert(this.id)时收到goNext(evt, obj)。

Answer 1

您正在将元素的id而不是元素本身传递给函数。因此，您的代码将字符串传递给jQuery构造函数，而text*字符串不会选择您的代码无法选择目标元素的任何元素。将元素（this）传递给函数，或者将#与obj字符串连接起来以生成选择器。

goNext(event, this);

如果你正在加载jQuery，请使用它。以下代码将选择DOM中的下一个匹配元素并关注它：

var $input = $('input[type=text]').on('keyup', function(e) {
      if (e.which == 13) {
          $input.eq( $input.index(this) + 1 ).focus();
      }
});

如果您想在没有下一个元素时专注于第一个输入：

if (e.which == 13) {
    var $next = $input.eq( $input.index(this) + 1 );
    if ( $next.length )
         $next.focus();
    else 
         $input.first().focus();
}

http://jsfiddle.net/zj89vkbj/

Answer 2

如果您在使用# sign之前添加textbox id，那么您的代码将有效，

if (evt.keyCode == 13) {      
    $('#'+curEle).next().focus();
//-----^ # for recognize id  in jquery
}

您可以运行代码段进行测试。

function goNext(evt, obj) {
  var curEle = obj;
  if (typeof evt == 'undefined' && window.event) {
    evt = window.event;
  }
  if (evt.keyCode == 13) {      
    $('#'+curEle).next().focus();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="text1" onkeypress="goNext(event,this.id);"/>
<input type="text" id="text2" onkeypress="goNext(event,this.id);"/>
<input type="text" id="text3" onkeypress="goNext(event,this.id);"/>

Answer 3

function myFunction(current, nextFieldID) {
            document.getElementById(nextFieldID).focus();
            
        }

<input type="text" id="txtFirst" onkeypress="myFunction(this, 'txtSecond')"  />
    <input type="text" id="txtSecond" onkeyup="myFunction(this, 'txtthird')"  />
    <input type="text" id="txtthird"  />

在jquery中输入按下时带有focusnext的文本框

3 个答案: