And*_*rus 9 html javascript jquery html5
订单输入表单包含多行中的产品代码和数量列,并在每行末尾包含删除按钮( - ).它还包含第一列和表单后面的添加按钮.
按enter键应将焦点设置为下一个文本或数字输入字段(产品代码或数量),跳过按钮.
我尝试使用下面的代码,但输入密钥被忽略.
Chrome调试器显示该行$(this).next('input').focus()已执行但focus()调用没有任何效果.
使用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>
问题是下一个输入有时是一个按钮。这是一个可能的解决方案的 JS Fiddle：
我已经向作为用户输入的 html 元素添加了一个 data 属性。该属性还包含一个递增索引，以便您可以控制接收焦点的元素的顺序。
以下是 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();
}
});