Question

我有一个页面，根据发货的项目数量创建一组文本框：

<c:forEach var="num" begin="1" end="${qtyToShip}" step="1" varStatus ="status">
  <tr>
    <td>
      <input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="if(!G2Step2Validate(this,'${shippingCommand.boxType}')){$(this).focus();}" />
    </td>
    <td>
      <input class="form-med" type="text" name="shipItems[${num - 1 }].shipCompanyBarCode"  onkeyup="if (!(event.keyCode==16 || (event.keyCode==9 && event.shiftKey))) {UPSStep2Validate(this);}"/>
    </td>
  </tr>
</c:forEach>

这就是我想要发生的事情。当用户输入条形码时，我需要进行AJAX调用以验证条形码是否有效（可以使用，是否正在发货，并且尚未在此订单上使用 - 防止重复扫描）。

将DWR用于AJAX，该服务一切正常。

问题是如果验证失败，我希望重点回到相关领域。那没有发生。重点始终是下一个输入框。

我曾尝试使用不同的事件：更改，模糊，键盘等。我尝试将焦点放在内联，在javascript中，尝试过使用jQuery，javascript等但没有运气。

寻找有关如何将焦点放回导致问题的输入框的建议/解决方案。

Answer 1

如果你使用onblur，你甚至可以设置焦点。问题在于时间和onchange事件被触发的时间。

<input class="form-med" type="text" name="shipItems[0].barCode" id="shipItems[0].barCode" onblur="if(true){this.focus();}" />

要确保光标位于IE的末尾，您可以添加onfocus事件：

<input class="form-med" type="text" name="shipItems[0].barCode" id="shipItems[0].barCode" onblur="if(true){this.focus();}" onfocus="this.value = this.value;" />

Answer 2

由于AJAX的性质，原始方法无效。那是

 <input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="if(!G2Step2Validate(this,'${shippingCommand.boxType}')){$(this).focus();}" />

无法完成。我想出的解决方案就是这个

 <input class="form-med" type="text" name="shipItems[${num - 1 }].barCode" id="shipItems[${num - 1 }].barCode" onchange="G2Step2Validate(this,'${shippingCommand.boxType}');" />

然后在进行ajax调用的javascript函数中，如果发生错误，则可以控制设置焦点。

如何将光标重新聚焦到无效的输入元素

2 个答案: