正文

阻止表单的默认提交事件(代码片段)

zmdcomeon  zmdcomeon  2023-03-16  503

关键词：

表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。
如下，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下：

技术图片

如果想要阻止表单的默认提交事件，有以下几种方法：

1.将<input>标签内按钮类型从type="submit"修改为type="button"
2.表单内的<button>未指定类型时，默认的类型为submit，可以显式的修改为<button type="button">来阻止表单提交
3.利用preventDefault()方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(event)
            event.preventDefault();
        
    </script>
</head>
<body>
    <form action="">
        <input type="submit" value="button" οnclick="func(event)" /> 
    </form>
</body>
</html>

4.用onclick点击事件来return false

讲一下表单提交按钮onclick事件：
οnclick="return true" 为默认的表单提交事件
οnclick="return false"为阻止表单提交事件
而一般用onclick来调用函数都是没有返回值的，所以一般调用完成后为默认return true;所以才会看到，先处理回调函数后再进行表单提交跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func()
            return false;
        
    </script>
</head>
<body>
    <form action="">
        <input type="submit" value="button" οnclick="return func()" /> 
        <!--注意是onclick内是return func();而不是简单的调用func()函数-->
    </form>
</body>
</html>

5.利用表单的onsubmit事件

注意：onsubmit事件的作用对象为<form>，所以把onsubmit事件加在提交按钮身上是没有效果的。
form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断
οnsubmit="return true" 为默认的表单提交事件
οnsubmit="return false"为阻止表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func()
            return false;
        
    </script>
</head>
<body>
    <form action="" οnsubmit="return func()">
        <input type="submit" value="button" /> 
    </form>
</body>
</html>

阻止form元素内的input标签回车提交表单(代码片段)

<form></form>标签内input元素回车会默认提交表单。阻止回车默认提交表单：$(‘form‘).on(‘keydown‘,function(event)if(event.keyCode==13)returnfalse;) 查看详情

vue常用修饰符(代码片段)

...5.表单修饰符-v-model增强的修饰符一、事件修饰符1..stop-阻止单击事件继续传播,也就是阻止冒泡2..prevent-提交事件不再重新加载页面,可以用来阻止表单提交的默认行为注意点:.stop和.prevent可以串联在一起使用,都会生效3..capture-内... 查看详情

解决element表单回车提交会刷新页面的bug(代码片段)

问题描述Element表单,提交按钮添加回车按键提交事件.偶尔出现回车提交直接刷新页面的情况.原因分析：Element表单本身存在的一个Bug,原生form表单的默认事件就是回车提交,现在原生form表单不怎么用了.原生form中回车弹起就会... 查看详情

trigger使用(代码片段)

...'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。事件处理函数会收到一个修复的(规范化的)事件对象，但这个对查看详情

jquery中preventdefault()stoppropagation()returnfalse之间的区别(代码片段)

一、preventDefault()方法，阻止浏览器默认行为浏览器有很多默认行为，比如form表单的submit按钮一点击，默认行为就要开始提交表单。再比如<ahref="http://www.klmai.cn">内部优惠券</a>a链接一点击默认触发的行为就是浏览器地址... 查看详情

vueformsumit防止提交prevent阻止表单提交(代码片段)

正常情况下button是带sumit的属性的<scriptsetuplang="ts">importreactivefrom"vue";letform=reactive(name:"小曼",age:123,);letsubmit=()=>console.log(form);;</script&g 查看详情

vue阻止事件冒泡和默认事件

...a标签当成一个普通的行标签或者是块标签，这时候需要阻止冒泡和默认事件。js里面：function(e)e.stopPropagation();//阻止冒泡事件function(e)e.preventDefault();//阻止默认行为//returnfalse;//也可以　但是vue已经处理好了：@click.stop代表阻止冒... 查看详情

javascript点击“输入”时阻止表单提交(代码片段)

查看详情

阻止事件默认行为（动作）：（兼容ie9以前版本写法）

阻止事件默认行为（动作）：　　默认行为：　　点右键弹出右键快捷菜单　　超级链接点击跳转页面　　表单中点击提交按钮提交表单　　禁止拖拽页面元素　　........ 　　标准：event.preventDefault() 　　非标准：event.returnVa... 查看详情

无法阻止表单提交的默认值|视图 3

】无法阻止表单提交的默认值|视图3【英文标题】：Can\'tpreventdefaultonformsubmission|Vue3【发布时间】：2021-05-2202:45:06【问题描述】：使用Vue3.0.5我有一个表格：<formid="app"@submit="onSubmit"><inputtype="text"><inputtype="text"><button... 查看详情

jquery表单提交

...).keyup(function)４、$(selector).submit(function) 提交表单前，阻止提交按钮的默认的action，或返回fals 查看详情

前后端交互：form表单与模板引擎(代码片段)

...同步提交概念缺点表单事件监听submit监听方式on监听方式阻止表单默认行为serialize快速获取表单提交的数据模板引擎基础知识概念优点art-template模板引擎使用标准语法form表单基础知识概念 <form>标签用于为用户输入创建H... 查看详情

表单验证(代码片段)

...，判断所有输入框的内容是否都符合要求，如果不符合则阻止表单提交案例1：某网站的注册页面，要求所有项目必须填写、密码长度必须大于6位、两次输入密码必须一致、年龄需要在15~100之间、邮件地址必须符合规则。分... 查看详情

表单提交fastadminform(代码片段)

...一些数据处理，则可以在此方法处理//注意如果我们需要阻止表单，可以在此使用returnfalse;即可//如果我们处理完成需要再次提交表单则可以使用submit提交,如下//Form.api.submit(this,success,error);returnfalse;); 查看详情

js——事件详情（默认行为阻止默认行为的用法：returnfalse等）(代码片段)

...器默认的菜单栏选项（这是最简单的默认行为） 2》阻止默认行为案例1：屏蔽右键菜单（即消除上图所示的“浏览器右键出现菜单栏”事件）代码如下所示：注：oncontextmenu事件：在元素中用户右击鼠标时查看详情

vue事件修饰符(代码片段)

Vue事件修饰符1.prevent：阻止默认事件2.stop阻止事件冒泡3.once事件只触发一次4.capture使用事件捕获模式5.self当e.target是当前操作的元素才触发事件6.passive：事件的默认行为立即执行1.prevent：阻止默认事件.prevent可以阻止... 查看详情

JavaScript OnBlur 事件阻止提交 HTML 表单

】JavaScriptOnBlur事件阻止提交HTML表单【英文标题】：JavaScriptOnBlureventpreventsHTMLformfrombeingsubmitted【发布时间】：2010-10-1901:47:57【问题描述】：考虑以下形式：<formaction="/a"method="post"><inputname="x"type="text"onblur="myonblur(e)"/>& 查看详情

jQuery - e.preventDefault 难题/阻止默认后无法提交表单

】jQuery-e.preventDefault难题/阻止默认后无法提交表单【英文标题】：jQuery-e.preventDefaultconundrum/can\'tsubmitformafterpreventingdefault【发布时间】：2014-09-0603:15:13【问题描述】：目标：停止“提交”按钮、验证字段、创建结果弹出框警报、... 查看详情