在输入窗口中激活下一个输入字段 [英] Activating next input field in form on 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 =pagedata-theme =a>
< div data-role =content>
< script> $（$＃$ b $（'＃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'>订单号< / label>
< input class ='ui-widget-content ui-corner-all form-fullwidth'id ='Tasudok'name ='Tasudok'value =''maxlength = '25'/>< / div> ;
< input type =hiddenname =_ rows/>
< table id =tableId>
< tr>
< th>产品代码< / th>
< th>数量< / th>
< td>
< input type =buttonvalue =+onclick =addRow（'tableId'）/>< / td>
< / tr>
< tr>
< td>
< input type =textname =Toode/>< / td>
< td>
< input type =numbername =Kogus/>< / td>
< td>
< input type =buttonvalue = - onclick =deleteRow（this）/>< / td>
< / tr>
< / table>
< input type =buttonvalue =+onclick =addRow（'tableId'）/>
< input type =submitvalue ='保存订单'/>
< / form>
< / div>
< / div>
< / body>
< / html>
问题是下一个输入有时是一个按钮。这里有一个可能的解决方案JS小提琴：
我已经为用户输入的html元素添加了一个数据属性。该属性还包含一个增量索引，以便您可以控制接收焦点的元素的顺序。
以下是HTML更改：
< input class ='ui-widget-content ui-corner-all form-fullwidth'data-index =1id ='Tasudok'name =' Tasudok'value =''maxlength = '25'/>
< input type =textname =Toodeclass =my-inputdata-index =2/>
< input type =numbername =Kogusdata-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（）;
}
}）;
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.
jquery, jquery-mobile, ASP.NET MVC4 are used
<!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>
The problem is that the next input is sometimes a button. Here is a JS Fiddle with a possible solution:
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.
Here are the HTML changes:
<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.
$('#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();
}
});
这篇关于在输入窗口中激活下一个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
