关于input组件回车后,默认提交form表单

出现的问题:

<div class="searchArea">
        <form action="###" class="searchForm">
          <input
            v-model="keyword"
            id="autocomplete"
            class="input-error input-xxlarge"
            @keyup.enter="goSearch"
          />
          <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch"
          >
            搜索
          </button>
        </form>
      </div>

在输入框输入数据敲回车后,触发表单的默认提交,地址栏会根据form的action改变,重新刷新表单。
原因:
官网上的例子如果存在多个表单选项,输入回车后并不会触发submit
,而出现单个input组件的时候,聚焦input后按回车就会触发自动提交。
解决方法:
一,html中的form

 <div class="searchArea">
        <form action="###" class="searchForm">
          <input
            v-model="keyword"
            id="autocomplete"
            class="input-error input-xxlarge"
            @keyup.enter="goSearch"
          />
          <!-- 多加一个input框会阻止form的默认行为,或者在form中阻止默认行为 -->
          <input hidden />
          <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch"
          >
            搜索
          </button>
        </form>
      </div>
 <div class="searchArea">
 		<!--在form中阻止默认行为-->
        <form action="###" class="searchForm" @submit.prevent>
          <input
            v-model="keyword"
            id="autocomplete"
            class="input-error input-xxlarge"
            @keyup.enter="goSearch"
          />
          <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch"
          >
            搜索
          </button>
        </form>
      </div>

二,el-form中的form
在标签上加@submit.native.prevent

参考链接:
//el-form
https://github.com/ElemeFE/element/issues/3625
//form
https://www.cnblogs.com/jiajia-hjj/p/15731493.html
//自定义标签
https://blog.csdn.net/qq_29468573/article/details/80771625?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&utm_relevant_index=2

Logo

前往低代码交流专区

更多推荐