Vue.js如何阻止动态加载的子自动完成组件触发表单提交？

看起来你遇到的核心问题是事件触发顺序导致的——浏览器在keydown阶段就会执行enter键触发表单提交的默认行为，而你绑定的@keyup.enter.prevent是在keyup阶段才触发，这时候默认的提交动作已经完成了，所以阻止无效。

这里有几个可靠的解决方案，按优先级推荐：

1. 改用keydown.enter拦截默认行为 #

把input上的@keyup.enter.prevent替换成@keydown.enter.prevent，这样就能在浏览器执行默认提交行为之前就阻止它：

<input 
  type="text" 
  :placeholder="myResources.Placeholder" 
  @input="onChange" 
  @keyup.down="onArrowDown" 
  @keyup.up="onArrowUp" 
  @keydown.enter.prevent="onEnter($event)"  <!-- 这里改成keydown -->
  @blur="onBlur"
  v-model="search" 
/>

这样修改后，当用户按下enter键时，浏览器的表单提交默认行为会被直接阻止，同时你的onEnter函数依然会正常执行。

2. 在父组件的form上添加全局拦截 #

如果第一种方案因为某些场景不适用（比如需要区分不同输入框的回车行为），可以在父组件的<form>标签上绑定submit事件，判断是否需要阻止提交：

<!-- 父组件的form -->
<form @submit.prevent="handleFormSubmit">
  <!-- 你的自动完成组件 -->
  <AutoComplete ref="autocomplete" />
</form>

然后在父组件的方法里：

handleFormSubmit(event) {
  // 判断自动完成组件是否处于激活状态（比如下拉列表展开）
  const autocomplete = this.$refs.autocomplete;
  if (autocomplete.isOpen) {
    // 如果自动完成正在使用，阻止表单提交
    event.preventDefault();
  }
  // 否则正常执行表单提交逻辑
}

这个方法更灵活，能根据组件的状态动态决定是否允许表单提交。

3. 给input添加formnovalidate属性 #

另一个简单的小技巧是给自动完成的input添加formnovalidate属性，这样这个输入框的enter键不会触发表单的默认提交：

<input 
  type="text" 
  formnovalidate  <!-- 添加这个属性 -->
  :placeholder="myResources.Placeholder" 
  @input="onChange" 
  @keyup.down="onArrowDown" 
  @keyup.up="onArrowUp" 
  @keyup.enter="onEnter($event)" 
  @blur="onBlur"
  v-model="search" 
/>

不过这个属性的作用是跳过表单验证，同时也会阻止该输入框触发submit，适合不需要验证的场景。

为什么之前绑定ul/li的事件无效？ #

因为当你按下enter键时，焦点是在input元素上的，ul和li并没有获得焦点，所以它们的keyup事件根本不会被触发，自然无法拦截提交行为。

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