当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 关于防止表单多次提交~按钮多次点击~限制点击事件

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

2019年04月05日  | 移动技术网IT编程  | 我要评论

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

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;
　　　　}
　　}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网