澳门游戏平台大全 电子游戏平台 js控制按钮在点击后是否可用实例,按钮多次点击重复提交数据问题_vue

js控制按钮在点击后是否可用实例,按钮多次点击重复提交数据问题_vue

vue绑定button的disable属性为:disabled:’变量名’

1、规定时间内获取验证码,防止多次获取:

总结

 设置按钮是可用与否,用到了:disabled属性。

•第一种: 不操作数据型

总结,

下面给大家补充一个实例代码

 例子:w3cschool

这里我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。
默认isDisable:的值为 false,按钮可以点击。
当我们点击这个按钮的时候,首先将按钮的绑定isDisable设置为true,1秒后立马将其置为false。
所以用户只能有一秒的时间去操作这个按钮。

文章来给各位同学介绍js控制按钮在点击后是否可用实例,希望此教程对大家会有所帮助。

这个其实是一个很细节的问题。
如果我们操作一个按钮,然后在按钮点击的时候绑定事件。

复制代码

以上所述是小编给大家介绍的vue
按钮多次点击重复提交数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 代码如下

vue中button 多次点击重复提交的实例代码

 object.disabled = false | true;

•第二种: 操作数据型

<input type=”button” id=”btn” value=”免费获取验证码” />
<script type=”text/javascript”>
var wait=60;
function time(o) {
电子游戏平台,        if (wait == 0) {
            o.removeAttribute(“disabled”);          
            o.value=”免费获取验证码”;
            wait = 60;
        } else {
            o.setAttribute(“disabled”, true);
            o.value=”重新发送(” + wait + “)”;
            wait–;
            setTimeout(function() {
                time(o)
            },
            1000)
        }
    }
document.getElementById(“btn”).onclick=function(){time(this);}
                         
</script>

实现原理:通过计时器讲button属性更改,点击完之后讲button属性设置为disable

用法:

sendComment () {this.disabled = trueif {this.$message({type:'error',message:'输入内容不能为空',})this.disabled = false}else{this.$post('/xx/xx/IdleGoodsComment',{goods_id:this.$route.params.id,content:this.text,user_id:window.uId,type:1}).then{this.getDetail=>{this.disabled=falsethis.getCommentList()this.text = ''},2000)this.disabled = true}})}}

 代码如下

 点击 export default { name: 'TestButton', data: function () { return { isDisable: false } }, methods: { submit() { this.isDisable = true setTimeout =&gt; { this.isDisable = false }, 1000) } }, }

<html>
<head>
<script type=”text/javascript”>
function disable()
  {
  document.getElementById(‘txt1’).disabled=true;
  }
function enable()
  {
  document.getElementById(‘txt1’).disabled=false;
  }
</script>
</head>
<body>
         
<textarea id=”txt1″>
Hello world….This is a text area
</textarea>
<br />
<input type=”button” onclick=”disable()” value=”Disable” />
<input type=”button” onclick=”enable()” value=”Enable” />
         
</body>
</html>

 代码如下

上面三个实例都是基于input的本身属性disabled来设置了,这样我们不管是点击还是使用定义控制都到最后设置了disabled属性。

用法: object.disabled = false | true; 1、规定时间内获…

复制代码

<html>
<head>
<title>同意条款</title>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”submit” name=”Submit” value=”同意” />
</form>
<script language=”javascript”>
document.form1.Submit.disabled = true;
var wait = 9; //停留时间
function updateinfo(){
  if(wait == 0){
    document.form1.Submit.value = “我同意”;
    document.form1.Submit.disabled = false;
  }
  else{
    document.form1.Submit.value = “阅读条款”+wait;
    wait–;
    window.setTimeout(“updateinfo()”,1000);
  }
}
updateinfo();
</script>
</body>
</html>

复制代码

 2、为了防止用户多次点击某按钮,造成多次提交表单的操作。某些按钮需要在点击后实现不可用操作。

标签:, , , ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图