阻止前端搜索框回车事件导致页面刷新

前言

在前端开发中，为了提高用户体验，通常会在搜索框中添加回车事件，允许用户通过回车键直接触发搜索操作。然而，这种实现方式可能会导致按下回车键时页面刷新，从而引起页面URL中的参数丢失等问题。以下是针对该问题的详细描述及解决方案。

问题描述

在给搜索框添加回车事件的实现过程中，触发回车事件时页面会发生刷新，导致一些不期望的效果，比如URL参数的丢失。

修改前的代码

<div style="margin-top: 1%" class="searchInput">
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input placeholder="请输入关键字" @keyup.enter.native="search(search)" v-model="search"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="height: 50px" @click="search(search)">搜索</el-button>
        </el-form-item>
    </el-form>
</div>

解决方案

在el-form标签上添加@submit.native.prevent，可以阻止表单提交时的页面刷新行为。

• .native修饰符表示监听的是组件根元素的原生事件。
• .prevent修饰符表示阻止事件的默认行为，即表单的提交导致的页面刷新。

修改后的代码

<div style="margin-top: 1%" class="searchInput">
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
            <el-input placeholder="请输入关键字" @keyup.enter.native="search(search)" v-model="search"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="height: 50px" @click="search(search)">搜索</el-button>
        </el-form-item>
    </el-form>
</div>

通过这种方式，我们可以保留回车触发搜索的便利性，同时避免了不必要的页面刷新，确保了更好的用户体验和页面稳定性。