【问题标题】:Take focus on next input after key up using Jquery使用 Jquery 键后专注于下一个输入
【发布时间】:2011-08-27 21:07:51
【问题描述】:

注意:我的页面只有文本框。没有其他的。 (没有别的 => 没有其他输入类型)

 $(":input[type='text']").keyup(function(event){

   if(valid)
     {
         // take a focus to next input element, which is again a text type.
     }

  });

按键后如何将焦点跳转到下一个输入元素。

在 Sarfraz 回答之后:-

 <div>
   <input type="text" maxlength="1" size="1" >
   <input type="text" maxlength="1" size="1" > 
   <input type="text" maxlength="1" size="1" > // sarfraj -- here it crash   Please check below for error.
 </div>


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

从萤火虫问题是

  $(this).next("[type=\"text\"]")[0] is undefined
  [Break On This Error] $(this).next('[type="text"]')[0].focus(); 

【问题讨论】:

    标签: jquery focus onkeyup


    【解决方案1】:

    更新:

    你应该如何修改你的代码:

    $(":input[type='text']").keyup(function(event){
       if(valid) {
          if ($(this).next('[type="text"]').length > 0){
             $(this).next('[type="text"]')[0].focus();
          }
          else{
             if ($(this).parent().next().find('[type="text"]').length > 0){
                $(this).parent().next().find('[type="text"]')[0].focus();
             }
             else {
               alert('no more text input found !');
             }
          }
    
       }
    });
    

    按键后如何将焦点跳转到下一个输入元素。

    next()focus 一起使用:

    $(this).next('[type="text"]')[0].focus();
    

    你的代码应该是这样的:

    $(":input[type='text']").keyup(function(event){
       if(valid) {
          $(this).next('[type="text"]')[0].focus();
       }
    });
    

    【讨论】:

    • 嘿伙计..我使用的是相同的代码。但是如果输入元素是该 div 中的最后一个,它会崩溃。让我编辑我的问题以获得更好的解释..
    • 问题是next() 迭代兄弟姐妹,一旦你用完兄弟姐妹你就完成了。看到你的标记你的选择是。 (a) 遍历所有 input 元素,直到找到下一个 (b) 使用我的代码(我没有测试它,但应该可以工作)。
    • 我不介意这个答案,但是它很不稳定,因为它非常特定于网站的布局,如果结构发生变化(假设你做一个新主题或其他东西)它会打破代码。
    • @Ali:我同意,假设标记在这里保持不变。你的回答也不错。
    • Mohit 做出了他的选择 :-) 我天生就是一名软件开发人员,我的大部分前端任务都需要 OOP 风格的编码,因此可重用性和功能与布局的解耦非常重要.即使您不需要进行 OOP 风格的编程,您也应该将功能与表示层分离(这只是一个好习惯)。
    【解决方案2】:

    html tabindex 属性用于定义按 Tab 键时在输入元素中移动的顺序。我会从设置这个开始。

    然后设置标签索引(以扩展您的示例):

     $(":input[type='text']").keyup(function(event){
       if(valid)
         {
             var currentIndex = $(this).attr("tabindex");
             var nextIndex = parseInt(currentIndex)+1;
             $("input[tabindex='"+nextIndex+"']").focus();
         }
      });
    

    基本上得到当前元素的tabindex,加1,得到那个标签索引的元素。

    【讨论】:

    • 你可以直接使用jQuery的next()而不是计算tabindex :)
    • 毫无疑问,但我的想法和你的不同。因为我假设无论出于何种原因他可能想要一个特定的迭代顺序。顺便说一句,作为巴基斯坦同胞(我知道我的个人资料显示 AU,但我在 KHI [即将搬家])如果你有职业邀请,我将不胜感激。
    • @Ali:我不确定是否有邀请选项,我登录并没有找到任何邀请选项。
    • @Sarfarz,不用担心,他们说要么是其他成员的邀请,要么是 stackoverflow 审查您的个人资料。显然我的 stackoverflow 分数、github 公共项目和linkedIn 不符合 StackOverflow 标准。
    • @Ali:让我完成我的个人资料,然后看看我是否获得了邀请权限。
    猜你喜欢
    • 2012-05-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-05
    • 1970-01-01
    • 2012-10-31
    • 2012-07-14
    相关资源
    最近更新 更多