ASPX页面绑定onkeyup的JS函数为何仅在存在2个输入框时触发

问题原因 #

这是浏览器的原生默认行为：当form表单内仅存在1个可输入的文本框时，用户按下回车键会自动触发表单提交，页面会直接刷新，导致你绑定的onkeyup里的逻辑还没执行就被中断了。当表单内有2个及以上可输入文本框时，浏览器不会触发回车自动提交的默认逻辑，所以你的JS函数可以正常执行。

解决方案 #

你可以任选以下任意一种方式修复：

• 方案1：给form标签添加提交拦截，阻止默认的回车提交行为
  只需要修改form标签，增加onsubmit="return false;"即可：

  <form id="form1" runat="server" onsubmit="return false;">
  

  如果你后续需要主动提交表单，调用document.getElementById("form1").submit()即可。
• 方案2：优化JS函数，主动拦截回车的默认行为，同时优化event的兼容性
  首先修改输入框的事件绑定，把event作为参数传入：

  <input type="text" onkeyup="searchBarcode(event)" class="form-control" id="txtBarcode" name="barcode" />
  

  再修改JS函数：

  function searchBarcode(e) {
      var event = e || window.event;
      var keycode = event.keyCode ? event.keyCode : event.which;
      if (keycode == 13) {
          event.preventDefault(); // 阻止默认的表单提交行为
          alert('Hello');
      }
  }
  

• 方案3：在form内添加一个隐藏的输入框，避免单输入框的默认触发逻辑
  随便在form内加一行隐藏的输入框即可：

  <input type="text" style="display: none;" />
  

内容的提问来源于stack exchange，提问作者Daniel Gee