Fom 提交表单的时候 避免跳转页面,用js控制

版权声明:本文自撰,转载先跟我说一下比较好 https://blog.csdn.net/KimBing/article/details/88991014

前言

当下的前端开发,在提交表单的很多时候,既需要能回车提交,又不想跳转页面,此时就需要用 js 控制。

需求:能回车提交数据,不跳转页面

例子:

HTML

   <form method="post" id="regForm" onsubmit="loginSubmit()">
        <div class="input-group">
            <label for="email">邮箱</label>
            <input type="text" name="email" id="email" >
        </div>
        <div class="input-group">
            <label for="password">密码</label>
            <input  name="password" type="password" id="password">
        </div>
        <button class="btn" type="submit" >登录</button>

JS

function loginSubmit(){
	event.preventDefault()
}

实现原理

form 上添加 onsubmit 事件,并指向处理数据提交的方法。

方法内部用 event.preventDefault() 移除 form 自动跳转的动作。(vue可以直接 @submit.prevent="loginSubmit()"

展开阅读全文

没有更多推荐了,返回首页