更改表单提交(进入选项卡）

Change form submission (enter to tab)

本文关键字：选项 表单提交      更新时间：2023-09-26

我有一个真正的基本表单（下面的代码），带有一堆背板PhP。有一个扫描仪用于输入数据，但它不是在每个项目后面加标签，而是发送一个"输入"命令。

添加javascript以使回车改为制表符到下一个表单字段，并在最后一个表单域上提交它，这可行吗？我在网上找到了一些脚本，但我尝试过的都没有在Firefox/Chrome中工作过。

代码：

<html><head><title>Barcode Generation</title></head><body>
<fieldset style="width: 300px;">
<form action="generator.php" method="post">
Invoice Number:<input type="text" name="invoice" /><br />
Model Number:<input type="text" name="model" /><br />
Serial Number:<input type="text" name="serial" /><br />
<input type="hidden" name="reload" value="true" />
<input type="submit" />
</form><br /><a href=null>en espanol</a></fieldset>
</body></html>

是。

您需要为表单实现一个"onsubmit"处理程序，该处理程序检查[ENTER]键是否从"正确"字段按下（或表单是否已充分填写）。如果没有，处理程序应该只返回false（以防止提交）（只需要做下一位。）

然后，您需要为每个可以扫描的输入实现一个"onkeypress"处理程序，当您获得[ENTER]键时，调用.prventDefault（）阻止提交表单，在下一个字段触发[TAB]"keypress（）"事件.focus（）。

更新：这对我有效：

<html>
  <head>
    <title>Barcode Generation</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function validate() {
        return ((/'S+/.test($('input[name="invoice"]').val())) &&
                (/'S+/.test($('input[name="model"]').val())) &&
                (/'S+/.test($('input[name="serial"]').val())));
      }
      $().ready(function(){
        $('#generator_form')
          .submit(validate)
          .find('input[type="text"]')
            .keypress(function(evt) {
              if (evt.which == 13) { // ENTER pressed
                var next_elem;
                if (evt.target.name == 'invoice') { next_elem = $('input[name="model"]'); }
                else if (evt.target.name == 'model') { next_elem = $('input[name="serial"]'); }
                else if (evt.target.name == 'serial') { return validate(); }
                $(next_elem).focus();
                return false;
              } else { // some other key pressed
                return true;
              }
            })
          .end();
      });
    </script>
  </head>
  <body>
    <fieldset style="width: 300px;">
      <form id="generator_form" action="generator.php" method="post">
        Invoice Number:<input type="text" name="invoice" /><br />
        Model Number:<input type="text" name="model" /><br />
        Serial Number:<input type="text" name="serial" /><br />
        <input type="hidden" name="reload" value="true" />
        <input type="submit" />
      </form>
      <br />
      <a href=null>en espanol</a>
    </fieldset>
  </body>
</html>

更新：以在[ENTER]的"串行"字段中提交。

更新：以在所有情况下正确验证。

相关文章：