jQuery 在输入时激活表单中的下一个输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19610357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Activating next input field in form on enter
提问by Andrus
Order entry form contains product code and quantity columns in multiple rows and delete button (-) in end of every row. It contains also add button in first column and after form.
订单输入表包含多行的产品代码和数量列，并在每行的末尾包含删除按钮 (-)。它还包含在第一列和表单之后的添加按钮。
Pressing enter key should set focus to next text or numeric input field (product code or quantity), skipping buttons.
按回车键应将焦点设置到下一个文本或数字输入字段（产品代码或数量），跳过按钮。
I tried code below is used but enter key is ignored.
我尝试使用下面的代码，但忽略了输入键。
Chrome debugger shows that line $(this).next('input').focus()is executed but
focus() call does not have any effect.
Chrome 调试器显示该行$(this).next('input').focus()已执行但 focus() 调用没有任何效果。
jquery, jquery-mobile, ASP.NET MVC4 are used
使用 jquery, jquery-mobile, 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&_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>
采纳答案by Sam
The problem is that the next input is sometimes a button. Here is a JS Fiddle with a possible solution:
问题是下一个输入有时是一个按钮。这是一个可能的解决方案的 JS Fiddle：
I've added a data attribute to the html elements that are inputs for the user. The attribute also contains an incrementing index so that you can control the order of the elements receiving focus.
我已经向作为用户输入的 html 元素添加了一个 data 属性。该属性还包含一个递增索引，以便您可以控制接收焦点的元素的顺序。
Here are the HTML changes:
以下是 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" />
Here is the new JavaScript event that will move between the input fields. It will determine the index of the element is currently being edited by using $(event.target).attr('data-index'). It increments the index and selects the next element using this.
这是将在输入字段之间移动的新 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();
}
});
