Vue表单提交后如何阻止光标跳转并保留回车提交功能

云原生阿岚

2026-7-2

问题：提交表单后保持光标在原输入框

我使用submit类型按钮是为了支持回车提交而非手动点击，已知如何阻止默认提交行为，但提交后输入框会生成新的div，光标会自动跳转至新位置，希望保持光标在原输入框。现有代码如下：

<form @submit.prevent="createNewList">
    <input
        type="text"
        class="form fs-4 me-3"
        placeholder="input something here..."
        v-model="listName"
        :maxlength="20"
    />
    <button type="submit" class="btn btn-success bi-clipboard-plus"></button>
</form>

我曾尝试在input标签中添加@keydown.enter.prevent，但导致回车提交功能失效，请问还有其他可行方案吗？

解决方案

不需要修改input的键盘事件，保留表单的@submit.prevent即可，核心是在提交完成后手动将焦点重新定位到原输入框，以下是具体实现：

方法一：通过`ref`手动聚焦

给输入框添加ref属性，用于后续获取DOM元素：

<input
    type="text"
    class="form fs-4 me-3"
    placeholder="input something here..."
    v-model="listName"
    :maxlength="20"
    ref="listInput" <!-- 添加这行 -->
/>

在createNewList方法中，完成业务逻辑后，等待DOM更新（如果清空了listName或修改了DOM结构），再调用focus()方法：

async createNewList() {
    // 执行你的业务逻辑：比如创建新列表、保存数据等
    // 假设业务完成后需要清空输入框
    this.listName = '';
    
    // 等待Vue更新DOM（如果有DOM结构变化）
    await this.$nextTick();
    
    // 聚焦回原输入框
    this.$refs.listInput.focus();
}