JavaScript防止表单重复提交,指定时间内禁止重复点击

最近项目在做一个登录页的时候,为了避免用户的多次重复点击登录按钮发送请求,所以我在点击了按钮发送请求后,将设置按钮变灰并禁用,倒计时一段时间后又可重复点击,具体实现如下,有需要的小伙伴可以参考一下。

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>

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » JavaScript防止表单重复提交,指定时间内禁止重复点击

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们