单输入框表单enter后页面刷新

最新推荐文章于 2025-06-05 13:39:52 发布

原创最新推荐文章于 2025-06-05 13:39:52 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表单enter刷新

JS 专栏收录该内容

29 篇文章

订阅专栏

博主在做搜索功能时，发现表单中只有一个输入框时，按下Enter键页面会刷新，这是因为Enter键会执行表单的默认提交事件。解决办法有：若表单集成框架，可在表单中再写一个隐藏输入框；也可直接屏蔽回车键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019.01.11今天在做一个搜索功能时发现，输入搜索字后点击搜索按钮没问题，但是按下enter键页面就刷新了一下，我就纳闷了，为啥之前写的都没有问题，就这里不能enter搜索，难道是因为前端搜索就不行？那也没道理啊，最终才发现：原来是因为，当<form>表单中只有一个输入框时enter键会执行表单的默认提交事件并刷新页面。
解决办法：

处理表单的默认行为
<form onsubmit="return false;">.......</form>

如果你的表单时集成的框架，不能在表单标签上直接禁止它的默认行为的话，可以在表单中再写一个输入框并将其隐藏

<form-group>
	<el-input
        clearable
         v-model="tableInit.searchKey"
         class="front-search-input"
         icon="h-icon-search"
         :placeholder="$t('s.searchMonitor')"
         :on-icon-click="searchTable"
         @keyup.enter.native="searchTable"
         :clear-icon-click="clearSearchTable">
       </el-input>
    <el-input style="display: none;"></el-input>
</form-group>

当然也可以直接屏蔽回车键

<input type="text"  onkeydown="return ClearSubmit(event)" />

 function ClearSubmit(e) {
      if (e.keyCode == 13) {
          return false;
      }
   }