Question

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>


$(document).keypress(
    function(event){
     if (event.which == '13') {

        event.preventDefault();

        $("#j").focus();


      }


});


</script>
</head>
<body>
<form id = "form1" action ='<?php echo $_SERVER['PHP_SELF']; ?>' method = "post">
    <input type = "text" name = 'i' id = 'i' autofocus>
    <input type = "text" name = 'j' id = 'j'>
    <input type = "submit" name = 'submit' value = 'submit'>
</form>

</body>
</html>

<?php


echo $_POST['i'];
echo $_POST['j'];


?>

在上面的代码中，我最初禁用了回车键按下事件。我正在使用条形码扫描仪，它已经回收了。这使我可以在使用条形码扫描仪扫描第一个输入字段后，将焦点对准下一个输入字段。但是，我希望在第二个字段通过扫描仪输入数据时提交表单。我该如何实现这一目标？

Answer 1

与多个输入兼容的解决方案是关注下一个输入，直到没有更多输入为止。

另外，您不需要提交按钮。但你可以离开它。片段：

＆＃13;

$("input[type='text']").keypress(function(e) {
	if (e.which != '13') {
  	return;
  }
  e.preventDefault();
  var next = $(this).next("input[type='text']");
  if (next.length > 0) {
    next.focus();
  } else {
    $("#form1").submit();
  }
});

$("#form1").on('submit', function() {
	console.log("submitted !");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" action="/my/url" method="post">
    <input type="text" name='i' id='i' autofocus>
    <input type="text" name='j' id='j'>
    <input type="submit" name='submit' value='submit'>
</form>

＆＃13;

Answer 2

首先将 oninput 函数添加到ID j

的输入标记中

<input type = "text" name = 'j' id = 'j' oninput="clickSubmitButton()">

然后提供 id 以提交按钮。

<input type = "submit" name = 'submit' id='submitbutton' value = 'submit'>

最后添加javascript代码自动点击按钮。

function clickSubmitButton(){
document.getElementById("submitbutton").click(); //id of the submit button to be clicked
}

在javascript中禁用和启用enter keypress事件

2 个答案: