9

订单输入表单包含多行的产品代码和数量列，每行末尾的删除按钮 (-)。它还包含在第一列和表单后添加按钮。

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

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

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&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>
4

2 回答 2

6

问题是下一个输入有时是一个按钮。这是一个带有可能解决方案的 JS Fiddle：

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

我已经向作为用户输入的 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();
    }
});
于 2013-10-26T19:26:26.167 回答
0

html位

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</style>
</head>
<body>

<form id= 'form' >
      <input onkeydown='handleEnter(event)' placeholder="field 1" /><br>
      
      <input onkeydown='handleEnter(event)' placeholder="field 2" /><br>
      <input placeholder="field 3" />
    </form>

</body>
</html>

脚本位

function handleEnter(event) {
   if (event.key==="Enter") {
      const form = document.getElementById('form')
      const index = [...form].indexOf(event.target);
      form.elements[index + 1].focus();
      //event.preventDefault();
    }
}
于 2021-11-25T15:01:05.023 回答