蓝牙扫码器输入后页面自动跳转问题求助（库存系统场景）

Michal你好，我完全理解你的困扰——扫码器输入库存编号后触发Enter键，结果页面莫名跳转，手动输入却一切正常。这其实是个常见的扫码器交互问题，根源在于扫码器的Enter键会触发浏览器的默认表单提交行为，哪怕你没显式写<form>标签，浏览器也可能把页面里的输入框和按钮识别为隐式表单，按下Enter就会触发提交跳转。

下面给你几个针对性的解决方案，结合你的现有代码修改：

1. 显式添加表单并阻止默认提交行为 #

最稳妥的方式是把扫码输入框和操作按钮放进一个<form>标签里，然后阻止表单的默认submit事件，从根源切断跳转可能：

修改HTML部分：

<input type="file" id="file-selector" accept=".csv">
<button id="btn-upload-csv">Read CSV</button>
<br>
<!-- 新增form标签包裹扫码相关元素 -->
<form id="scan-form">
  <input id="scanID">
  <button id="buttonS" onClick="spustit()">Spustit</button>
  <button id="buttonR" onClick="reset()">Reset</button>
</form>
<p id="pole"></p>
<p id="pole2"></p>
<table id="tbl-data"></table>

然后在JavaScript里添加表单提交阻止逻辑：

// 阻止表单默认提交行为
document.getElementById('scan-form').addEventListener('submit', function(event) {
  event.preventDefault();
});

2. 优化Enter键事件处理 #

你现有的keyup事件已经加了event.preventDefault()，但可能因为扫码器的输入速度快，或者事件触发时机的问题没生效。建议换成keydown事件（按键按下时触发，比keyup更早），同时用更标准的event.key代替已废弃的keyCode：

var input = document.getElementById("scanID");
input.addEventListener("keydown", function(event) {
  // 用event.key判断更可靠，兼容现代浏览器
  if (event.key === 'Enter') {
    event.preventDefault();
    spustit();
  }
});

3. 额外优化：过滤空扫码记录 #

你注释里提到想禁止空扫码，可以在spustit函数里先判断输入值是否为空，避免无效数据：

function spustit() {
  const scanValue = document.getElementById("scanID").value.trim();
  // 如果输入为空，直接返回不处理
  if (!scanValue) {
    document.getElementById("scanID").value = "";
    return;
  }
  nove = [scanValue];
  cele.push(nove);
  // 用join把数组转成更友好的字符串展示，避免默认的数组toString格式
  document.getElementById("pole").innerHTML = cele.map(item => item[0]).join(', ');
  document.getElementById("scanID").value = "";
}

为什么这些方法有效？ #

扫码器本质是模拟快速输入字符+Enter键，而浏览器的默认行为是：当表单里的输入框获得焦点时按下Enter，会自动触发表单提交。哪怕没有显式的<form>标签，部分浏览器也会把页面内的输入和按钮视为隐式表单，导致跳转。通过显式添加表单并阻止submit事件，就能彻底避免这个问题。

把这些修改整合到你的代码里，应该就能解决扫码器导致的页面跳转问题了！

内容的提问来源于stack exchange，提问作者Michal Masopust