JavaScript防止表单重复提交,指定时间内禁止重复点击
最近项目在做一个登录页的时候,为了避免用户的多次重复点击登录按钮发送请求,所以我在点击了按钮发送请求后,将设置按钮变灰并禁用,倒计时一段时间后又可重复点击,具体实现如下,有需要的小伙伴可以参考一下。
关键代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录页</title> <script type="text/javascript"> window.onload = _ => { document.getElementById('btn').onclick = function () { send(this, 60) } } /** * 控制 ele 的按钮在指定时间内禁止重复点击 * @param ele 标签对象 * @param time 禁用时间(s) */ function send (ele, time) { if (!time) { ele.removeAttribute('disabled') return ele.value = '登录' } ele.setAttribute('disabled', true) ele.value = time + '秒后可以重新登录' setTimeout(_ => send(ele, --time), 1000) } </script> </head> <body> <input type="button" id="btn" value="登录"/> </body> </html>
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » JavaScript防止表单重复提交,指定时间内禁止重复点击
码云笔记 » JavaScript防止表单重复提交,指定时间内禁止重复点击
![](https://media.mybj123.com/wp-content/uploads/2024/02/1706962282-d2a91681b352c3a.png)