问题:文本框输入完成后点击回车页面刷新
问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件。

解决方法:

1、增加一个隐藏的输入框

<input itype="text" style="display:none" />

增加了一个隐藏的输入框之后,表单的文本框不再是唯一的,回车不会触发提交事件

2、去掉输入框的回车事件

<input type="text"  onkeydown="return ClearSubmit(event)" />
function ClearSubmit(e) {
if (e.keyCode == ) {
return false;
}
}

但是有的需求又要有回车事件,视情况选择

3、阻止表单默认提交事件

如果 onsubmit 句柄返回 fasle,表单的元素就不会提交。如果该函数返回其他值或什么都没有返回,则表单会被提交。

        由于 onsubmit 句柄可以取消表单的提交,所以它对于进行表单验证是十分理想的;

这样的话,修改form的onsubmit事件可以让敲入回车的时候执行我们想要的操作而不跳转到action所指定的url,如下

<form action="myurl" onSubmit="fun1();return false;">

  

变种:element官方解决方案:在el-from 加上 @submit.native.prevent

<el-form :inline="true"  class="demo-form-inline"  @submit.native.prevent>
<el-form-item label="名称:" style="margin-bottom:0">
<el-input placeholder="名称" @keyup.enter.native="doFilter(5)" v-model="likeName"></el-input>
</el-form-item>
<el-form-item style="margin-bottom:0">
<el-button class="btnCheck" @click="doFilter(5)" style="margin-bottom:0">查询</el-button>
</el-form-item>
</el-form>

form表单input回车提交问题的更多相关文章

  1. form表单自动回车提交

    对于使用了submit按钮的form表单,浏览器会直接建立回车与submit按钮之间的关联

  2. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  3. 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

    前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...

  4. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

  5. Form表单三种提交按钮的区别?

    1.<input type='button' id='btn' onclick='check()' value="提交"> 说明:只是普通的按钮(不附带提交功能),不会 ...

  6. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  7. form 表单<input type="button" value="登录" onclick="loginSubmit ()"/> 点击提示 Uncaught TypeError: loginSubmit is not a function

    在网上搜了一堆东东,仔细看了一下,再加上实验,发现原因出在<form>中. <form method="post"> <button type=&qu ...

  8. form表单submit按钮提交页面不跳转

    方案一 <html> <body> <form action="" method="post" target="nm_i ...

  9. 通过button将form表单的数据提交到action层

    form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性". ...

随机推荐

  1. java基础-泛型举例详解

    泛型 泛型是JDK5.0增加的新特性,泛型的本质是参数化类型,即所操作的数据类型被指定为一个参数.这种类型参数可以在类.接口.和方法的创建中,分别被称为泛型类.泛型接口.泛型方法. 一.认识泛型 在没 ...

  2. DRF Django REST framework 之 序列化(三)

    Django 原生 serializer (序列化) 导入模块 from django.core.serializers import serialize 获取queryset 对queryset进行 ...

  3. 洛谷 P2388 阶乘之乘 题解

    本蒟蒻又来发题解了QwQ; 看到这个题目,本蒟蒻第一眼就想写打个暴力: 嗯,坏习惯: 但是,动动脑子想一想就知道,普通的的暴力是过不了的: 但是,身为蒟蒻的我,也想不出什么高级的数学方法来优化: 好, ...

  4. 移动开发在路上-- IOS移动开发 五 网络请求封装

    接着上次的讲,这次我们讲 网络请求的封装  打开创建的项目,让我们一起来继续完成他, 上次我们说到GET请求地址的拼接: 我们接着上次的继续完善: 下边我们要定义的是 block //定义block ...

  5. socket AcceptAsync方法的使用

    AcceptAsync与Accept很大的不一样 Accept是一个同步 阻塞的已经封装好底层的方法 AcceptAsync是一个异步 非阻塞未封装的底层连接入口,需要手动填入连接代码用于优化sock ...

  6. win7再分配磁盘新加卷

    磁盘在系统刚分区的时候可以做磁盘分区最好 1.右键我的电脑,选在管理 2.在此窗口下依次展开选项,点击存储->磁盘管理,右边是我已经分好的盘不用看的 3.确认一下我的电脑的各个盘的空间,选择要压 ...

  7. 【IntelliJ Idea】常用快捷键

    [IntelliJ Idea]常用快捷键 转载:https://www.cnblogs.com/yangchongxing/p/10654018.html ============= 调试 ===== ...

  8. 【Maven】聚合

    [Maven]聚合 转载: 使用聚合一次能为多个 maven 项目执行命令,而不用到每一个项目下去执行命令. 聚合 pom 的特殊之处 1.packaging 配置 pom <packaging ...

  9. Manjaro-kde-18.1.3安装体验

    身为Linux排名第一的版本,怎么能不安装一下亲自体验 制作启动U盘 Manjaro身为arc系列的一员,所以我选择使用raw的方式写入(其实我是在Ubuntu中用dd方式写入的,Windows用户也 ...

  10. C#使用 OleDbConnection 连接读取Excel

    /// <summary> /// 读取Excel中数据 /// </summary> /// <param name="strExcelPath"& ...