form表单input回车提交问题
问题:文本框输入完成后点击回车页面刷新
问题出在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回车提交问题的更多相关文章
- form表单自动回车提交
对于使用了submit按钮的form表单,浏览器会直接建立回车与submit按钮之间的关联
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...
- form 表单跨域提交
<!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...
- Form表单三种提交按钮的区别?
1.<input type='button' id='btn' onclick='check()' value="提交"> 说明:只是普通的按钮(不附带提交功能),不会 ...
- jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- form 表单<input type="button" value="登录" onclick="loginSubmit ()"/> 点击提示 Uncaught TypeError: loginSubmit is not a function
在网上搜了一堆东东,仔细看了一下,再加上实验,发现原因出在<form>中. <form method="post"> <button type=&qu ...
- form表单submit按钮提交页面不跳转
方案一 <html> <body> <form action="" method="post" target="nm_i ...
- 通过button将form表单的数据提交到action层
form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性". ...
随机推荐
- pop 与 popitem
pop给出一个键弹出值 popitem弹出一个项 >>> a.pop(2)'two'>>> a{1: 'one', 3: 'three', 4: 'four'}&g ...
- syslog日志
Syslog协议 系统日志(Syslog)协议是在一个IP网络中转发系统日志信息的标准,它是在美国加州大学伯克利软件分布研究中心(BSD)的TCP/IP系统实施中开发的,目前已成为工业标准协议,可用它 ...
- kubernetes学习笔记(一)——minikube安装记录
想学习一下kubernetes,于是先安装一个单机版来学习一下.但是就是这个最简单的单机版安装方式都倒腾了我好久,记录下自己的安装过程.博主是在windows利用vmware workstation安 ...
- Ceph 概述和理论
1.1 Ceph概述 官网地址:https://docs.ceph.com/docs/master/ 1.Ceph简介 概述:Ceph是可靠的.可扩展的.统一的.分布式的存储系统.同时提供对象存储RA ...
- 基于FPGA的图像开发平台 其他摄像头附件说明(OV5642 OV9655)
基于FPGA的图像开发平台 其他摄像头附件说明 FPGA_VIP_V101 编者 奇迹再现 个人博客 http://www.cnblogs.com/ccjt/ 联系邮箱 Shenyae86@163.c ...
- C#实现在foreach遍历中删除集合中的元素(方法总结)
目录 方法一:采用for循环,并且从尾到头遍历 方法二:使用递归 方法三:通过泛型类实现IEnumerator 在foreach中删除元素时,每一次删除都会导致集合的大小和元素索引值发生变化,从而导致 ...
- Javascript 垃圾回收方法
Javascript 垃圾回收方法 标记清除(mark and sweep) 这是 JavaScript 最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为& ...
- 如何在Tomcat服务器配置CGI运行Python
想通过请求触发部署在tomcat上的非java应用程序,需要用到Common Gateway Interface(CGI).Tomcat提供了Servlet CGI支持. 修改web.xml web. ...
- 从项目中理解SSM框架
我们看招聘信息的时候,经常会看到这一点,需要具备SSH框架的技能:而且在大部分教学课堂中,也会把SSH作为最核心的教学内容. 但是,我们在实际应用中发现,SpringMVC可以完全替代Struts,配 ...
- 牛客国庆集训派对Day1 L New Game!(堆优化dijkstra+建图)
链接:https://ac.nowcoder.com/acm/contest/201/L来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 1048576K,其他语言2097 ...