Jquery EasyUI动态改变值(及输入框携带按钮的使用方法)

最新推荐文章于 2022-03-10 17:13:00 发布

原创最新推荐文章于 2022-03-10 17:13:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #jquery #输入框携带按钮 textbox

EasyUI 同时被 2 个专栏收录

3 篇文章

订阅专栏

Jquery

2 篇文章

订阅专栏

本文介绍如何使用Jquery和EasyUI实现按钮的倒计时功能。通过动态修改按钮文字和禁用状态来达到限制重复点击的效果。适用于验证码发送等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、仅使用Jquery动态控制改变值

<input id="btn" type="button" onclick="sendMsg();" value="发送校验码"/>

<script type="text/javascript" src=".../js/jquery.min.js"></script>              
<script type="text/javascript">
function sendMsg() {
var checked = 1;
//设置时长5秒
var time = 5;
function changeTimeDynamic) {
if (time == 0) {
clearInterval(timer);
$('#btn').val("发送校验码");
$('#btn').attr("disabled", false);
checked = 1;
return true;
}
$('#btn').val(time + "S后再次发送");
time--;
return false;
checked = 0;
}
//值正在改变时，禁止点击按钮
if (time > 0) {
$('#btn').attr("disabled", true);
}
changeTimeDynamic();
//1秒执行一次changeTimeDynamic函数
var timer = setInterval(changeTimeDynamic, 1000);
}
</script>

触发函数前（函数执行完后）效果：

触发函数后效果：

二、仅使用EasyUI 的 textbox 动态控制改变值（输入框携带按钮）

<head>
<link rel="stylesheet" type="text/css" href=".../jquery-easyui-1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href=".../static/jquery-easyui-1.5/themes/color.css">
<script type="text/javascript" src=".../jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src=".../jquery-easyui-1.5/jquery.easyui.min.js"></script>
</head>
<body>
<input id="mobile" name="mobile" class="easyui-textbox" required="true"
data-options="buttonText:'获取校验码',validType:['mobile']">
</body>

<script>

    $(function () {
        //绑定点击事件
        $('a', $('#mobile').next('span')).click(function (value) {
            sendMsg();

        });
    })
    function sendMsg() {
        var checked= 1;
        var time = 10;
        function changeTimeDynamic() {
            if (time == 0) {
                clearInterval(timer);
                $('#mobile').textbox({buttonText: '获取校验码'});
                $('#mobile').textbox({readonly: false});
                //重新绑定事件,这个很重要，因为该事件触发后，需要再次绑定事件才可继续被触发
                $('a', $('#mobile').next('span')).click(function () {
                    sendMsg();
                });
                sends.checked = 1;
                return true;
            }
            $('#mobile').textbox({buttonText: time + 'S后再次发送'});
            time--;
            return false;
            sends.checked = 0;
        }

        if (time > 0) {
            //设置input不可编辑
            $('#mobile').textbox({readonly: true});
        }
        changeTimeDynamic();
        var timer = setInterval(changeTimeDynamic, 1000);
    }
    }
</script>

触发函数前（函数执行完后）效果：