激活输入表单中的下一个输入字段

订单输入表单包含多行中的产品代码和数量列，并在每行末尾删除按钮（ - ）。它还包含第一列和之后的添加按钮。激活输入表单中的下一个输入字段

按回车键应将焦点设置到下一个文本或数字输入栏（产品代码或数量），跳过按钮。

我试过下面的代码，但输入键被忽略。

Chrome调试器显示$(this).next('input').focus()行被执行，但 focus（）调用没有任何效果。

jquery的，jquery的移动，ASP.NET MVC4用于

<!DOCTYPE html> 
<html> 
<head> 
    <script src="/Scripts/jquery/jquery-1.9.1.js"></script> 
</head> 
<body> 
    <div data-role="page" data-theme="a"> 
<div data-role="content"> 
<script> 
    $(function() { 
    $('#inputform').on('keydown', 'input', function (event) { 
     if (event.which == 13) { 
     $(this).next('input').focus(); 
     event.preventDefault(); 
     } 
    }); 
    }); 
</script> 
<form id='inputform' method="post" 
    action ="/Detail/SaveFullDocument?_entity=DokG&amp;_id=0"> 
    <fieldset> 
<div class='form-field' > 
<label class='form-label' for='Tasudok'>Order number</label> 
<input class='ui-widget-content ui-corner-all form-fullwidth' id='Tasudok' name='Tasudok' value='' maxlength='25' /></div> 

    <input type="hidden" name="_rows" /> 

    <table id="tableId"> 
    <tr> 
     <th>Product code</th> 
     <th>Quantity</th> 
     <td> 
     <input type="button" value="+" onclick="addRow('tableId')" /></td> 
    </tr> 

    <tr> 
     <td> 
     <input type="text" name="Toode" /></td> 
     <td> 
     <input type="number" name="Kogus" /></td> 
     <td> 
     <input type="button" value="-" onclick="deleteRow(this)" /></td> 
    </tr> 
    </table> 

    <input type="button" value="+" onclick="addRow('tableId')" /> 
    <input type="submit" value='Save order' /> 
</form> 

    </div> 
    </div> 
</body> 
</html>

来源

2013-10-26 Andrus

的问题是，下一个输入有时是一个按钮。这里是一个JS拨弄一个可能的解决方案：

http://jsfiddle.net/hxZSU/1/

我添加了一个数据属性是用于用户输入的HTML元素。该属性还包含一个增量索引，以便您可以控制接收焦点的元素的顺序。

这里是HTML的变化：

<input class='ui-widget-content ui-corner-all form-fullwidth' data-index="1" id='Tasudok' name='Tasudok' value='' maxlength='25' /> 
<input type="text" name="Toode" class="my-input" data-index="2" /> 
<input type="number" name="Kogus" data-index="3" />

这里是新的JavaScript事件，将输入字段之间移动。它将通过使用$（event.target）.attr（'data-index'）来确定当前正在编辑的元素的索引。它增加索引并使用它选择下一个元素。

$('#inputform').on('keydown', 'input', function (event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     var $this = $(event.target); 
     var index = parseFloat($this.attr('data-index')); 
     $('[data-index="' + (index + 1).toString() + '"]').focus(); 
    } 
});

来源

2013-10-26 19:26:26 Sam

不适用于iOS ... – tylerl

激活输入表单中的下一个输入字段

回答

相关问题