javascript - 如何在 JavaScript 中启用虚拟键盘上的 'Go' 按钮？

Question

我是 javascript 的新手，目前正在构建一个带有表单的网站，如果用户在表单中输入正确的代码并按“提交”按钮，该表单会将用户导航到不同的页面。

目前，用户必须单击页面上的“提交”按钮才能使其正常工作 - 目前他们无法使用平板电脑或 iPhone 等设备上虚拟键盘上的“执行”按钮。我想修复该网站，以便用户还可以使用平板电脑和智能手机上的“前往”按钮，而不是单击“提交”按钮。

我的代码:

按钮:

<button class="btn btn-info btn-large span12" id="joe_btn" onclick="onSubmit()" touchstart="onSubmit()">Submit</button>

运行它的Javascript:

  <script type="text/javascript">
        function onSubmit() {
                 if (document.getElementById('password').value == '03010213') {window.location.href = 'map.html'; }
                  else{ alert('Please check your passcode and try again');}
                       }
  </script>

如何修复代码，以便用户可以在平板电脑和智能手机上使用“开始”按钮并且它也能正常工作？

如有任何反馈，我们将不胜感激!请注意，我是 Javascript 的初学者，因此请在您的答案中显示我需要使用的确切更正代码。

非常感谢，

乔

Answer 1

我认为，为了显示 Go 按钮，您需要在页面上添加 input type="submit"。单击该按钮后，运行您的函数并返回 false。实际的表单提交不会通过，因为您的脚本会将您带到不同的 URL。请注意，输入必须是 form 的一部分，如答案和 fiddle 中所示。这是一个 JSFiddle 显示它的工作原理:http://jsfiddle.net/3TG6w/3/embedded/result - 在您的移动设备上浏览到此内容。

<form method="post" action="home.html">
  <input type="password" id="password"/>
  <input type="submit" class="btn btn-info btn-large span12" id="joe_btn" onclick="onSubmit(); return false;" touchstart="onSubmit(); return false;" value="Submit" />
</form>


<script type="text/javascript">
  function onSubmit() {
    if (document.getElementById('password').value == '03010213') {window.location.href = 'map.html';
    }
    else{
        alert('Please check your passcode and try again');
    }
  }
</script>