欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-08 07:58:02
...

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

  1. 处理表单的默认行为
    <form onsubmit="return false;">.......</form>
  2. 如果你的表单时集成的框架,不能在表单标签上直接禁止它的默认行为的话,可以在表单中再写一个输入框并将其隐藏
    <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>
    
  3. 当然也可以直接屏蔽回车键
    <input type="text"  onkeydown="return ClearSubmit(event)" />
    
     function ClearSubmit(e) {
          if (e.keyCode == 13) {
              return false;
          }
       }
    
相关标签: 表单enter刷新