jQuery获取文本输入框值时 取drive-location-input触发页面带值跳转异常

你遇到的输入后自动携带值跳转的现象，和JS取输入值的逻辑、.drive-location-input本身的属性完全无关，是浏览器原生表单的默认提交机制触发的：

• 首先确认当前页面DOM：所有输入框所在的父级容器，是否被包裹在 <form> 标签内
• 浏览器的默认规则是：只要单个<form>内存在至少1个文本类型<input>，在任意输入框按下回车键时，就会触发表单的默认GET提交逻辑，根本不会走到你写的try/catch取数流程，这也是为什么跳转发生在代码执行前、完全没触发alert的原因
• 你之前给.drive-location-input加的onsubmit="return false;"完全无效：onsubmit是<form>标签专属的监听事件，绑定在<input>元素上根本不会被触发，自然拦不住默认提交

你看到的跳转后URL为127.0.0.1/main/333333333的现象，是因为表单默认GET提交时，部分浏览器会把当前聚焦输入框的内容直接拼接到当前页面路径后；如果没给输入框设置专属name属性，就会出现“输什么值就跳对应路径”的直观效果。

为什么看似只有第三个输入框触发问题 #

可以自己做个对照测试：在其他三个输入框输完内容后直接按回车，一样会触发跳转。之前只有第三个框出现问题，本质是操作习惯巧合：输完前两个框的内容时，你是用Tab键/鼠标切换到下一个输入框，没有按回车触发提交；输到第三个框时下意识按了回车想跳转到最后一个用户名输入框，刚好命中了表单的默认提交逻辑。

可落地的修复方案 #

1. 先移除无效代码：删掉.drive-location-input上绑定的onsubmit="return false;"，这段代码不仅不起作用，还会误导你以为已经做了提交拦截
2. 从根源阻断表单默认提交，二选一即可：
   • 如果完全不需要用到原生表单提交能力：直接给页面的<form>标签加onsubmit="return false;"，一劳永逸挡住所有回车触发的自动跳转
   • 如果需要保留自定义提交流程：在JS初始化阶段加入全局提交拦截

     document.querySelector('form').addEventListener('submit', (e) => {
         e.preventDefault()
     })
     

3. 顺手优化现有取数逻辑的稳定性隐患：你目前写的jQuery选择器用了直接子选择器>，只要后续给输入框套一层嵌套容器就会直接选不到值，反而引入新的取数异常，可以调整为更抗结构变动的类选择器匹配：

   // 替换原有取数逻辑，避免结构调整导致的取值失效
   serial = $(`#manual-row-${x} .serial-num-input`).val()
   health = $(`#manual-row-${x} .drive-health-input`).val()
   location = $(`#manual-row-${x} .drive-location-input`).val()
   username = $(`#manual-row-${x} .username-input`).val()
   

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