欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于防止表单多次提交~按钮多次点击~限制点击事件

程序员文章站 2022-12-28 09:08:43
为了防止用户多次提交表单我们可以有多种处理方法,以下做一些简单的说明 1.通过css设置属性 pointer-events: none; 这个属性是css的特殊属性,他更像是javaScript,它能: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 acti ......

为了防止用户多次提交表单我们可以有多种处理方法,以下做一些简单的说明

1.通过css设置属性 pointer-events: none;

  这个属性是css的特殊属性,他更像是javascript,它能:

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止css里的 hover 和 active 状态的变化触发事件
  • 阻止javascript点击动作触发的事件

  pointer-events属性有很多值,但是对于浏览器来说,只有auto和none两个值可用

2.通过disabled属性禁止提交按钮

  <button type="button" disabled="disabled">click me!</button>

  jq语法 设置  $("button").attr("disabled","true"); === $("button").attr("disabled","disabled");

     移除  $("button").attr("disabled","false");===$("button").removeattr("disabled");

3.通过设置定时器防止一定时间内连续点击提交

  btn.onclick = function oper(){

    //执行一次 过3秒结束 才能点击
    btn.onclick = null;
    cleartimeout(timer);
    var timer = settimeout(function(){
      btn.onclick = oper;
    },3000);
  }

4.通过设置一个变量记录提交次数

  如果用户已经单击“提交”按钮,该脚本会自动记录当前的状态,并将submitcount变量自加1,

  当用户试图再次提交时,脚本判断submitcount变量值非零,提示用户已经提交,从而避免重复提交表单。

var submitcount=0;
  function submitonce (form){
    if (submitcount == 0){
    submitcount++;
    return true;
    } else{
      alert("正在操作,请不要重复提交,谢谢!");
      return false;
    }
  }