javascript - 按 Enter 重新加载页面而不是提交表单

Question

我有一个表单，它接受邮政编码输入，并根据输入将用户转发到两个 URL 之一。当您单击“提交”按钮时，一切都很好，但是，按 Enter 会重新加载页面，我已经浏览了大约 30 个类似的论坛，但无济于事。我尝试了多种方法，包括将提交按钮类型从按钮更改为提交。我尝试了几个片段来强制回车键执行我想要的操作，但没有一个起作用。它只是不断重新加载页面。这是我目前在网站上的代码:

<div align="center">
  <script type="text/javascript">
    //<![CDATA[
    function zipValidate() {

        val = document.zipForm.zip.value;

        switch (val) {
          case '94005':
            document.location = 'http://www.crossborderscheduling.com/home/calendar/';
            break;

          default:
            document.location = 'http://crossborder.fedex.com/us/';
            break;

        }
      }
      //]]>
  </script>
  <form name="zipForm" id="zipForm" method="post">
    <input name="zip" type="text" id="zip" maxlength="5" size="10%" placeholder="Zip Code" />
    <input name="zipButton" type="button" id="zipButton" value="Submit" onclick="zipValidate()" />
  </form>
</div>

Answer 1

<form>有一个默认值 [action] 的""这意味着当表单提交时，数据将发布到当前页面。

您的<input name="zipButton"...>元素使用type="button"而不是type="submit"并且您已经绑定(bind)了 onclick它的事件处理程序。

单击 #zipButton元素实际上并不提交表单，这就是为什么你的 zipValidate回调有效。

在关注 #zip 时按 Enter字段将触发implicit submission表单的行为，这会触发 submit事件于 form元素，并完全忽略 #zipButton点击回调。

<小时/>

那么如何解决这个问题呢？

让我们从修复 HTML 开始:

<form name="zipForm" id="zipForm" method="post">
  <input name="zip" type="text" id="zip" maxlength="5" size="10" placeholder="Zip Code" aria-label="Zip Code" />
                                                    1: ^^^^^^^^^                     2: ^^^^^^^^^^^^^^^^^^^^^
  <input name="zipButton" type="submit" id="zipButton" value="Submit"  />
                       3: ^^^^^^^^^^^^^                            4: ^
</form>

1. [size] 属性的值应为非负整数
2. 因为您没有使用 <label>元素，it's important to provide a label for accessibility 。 [placeholder]属性并不能充分替代。
3. 该按钮应使用 submit type
4. 不要在 HTML 中使用 JavaScript

现在 HTML 已经清理完毕，让我们看看 JavaScript:

<script>
// 1 ^^^,
// 2
function zipValidate() {
  // 3
  var val,
      action;
  // 4
  val = document.getElementById('zip').value;
  switch (val) {
    case '94005':
      // 5
      action = 'http://www.crossborderscheduling.com/home/calendar/';
      break;
    default:
      action = 'http://crossborder.fedex.com/us/';
      break;
  }

  // 6
  this.setAttribute('action', action);
}

// 7
document.getElementById('zipForm').addEventListener('submit', zipValidate, false);
</script>

1. 不要使用[type="text/javascript"] ，已经很长时间没有必要了
2. 不要使用 CDATA，它已经很长时间没有必要了
3. 声明变量
4. 不要通过 ID 使用隐式全局引用，而是使用 DOM 搜索方法之一查询 DOM: getElementById , getElementsByTagName , getElementsByClassName , querySelector ，或querySelectorAll
5. 存储您要将表单提交到的 URL。安if语句或三元运算符就足够了，但我保留了开关，因为它对于这种情况几乎不重要。
6. 设置 [action]表单的属性，用于告诉表单要将其提交到何处。您无需调用preventDefault事件上，因为提交行为将处理您所追求的重定向。
7. 将事件处理程序从 JavaScript 绑定(bind)到表单。您可能需要重新安排脚本在 DOM 中的执行位置，或者等待 document.onreadystatechange这样#zipForm当您尝试将事件绑定(bind)到元素时，该元素就存在。