Javascript之操作

控制输入框只能输入数字

应用：主要应用在手机号输入框中。

html代码：

<input type="text" name="mobile" maxlength="11" minlength="11" autocomplete="off" placeholder="请输入手机号码" onkeyup="chekNum(this)">

js代码：

function chekNum(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, "");
    obj.value = obj.value.replace(/^\./g, "");
    obj.value = obj.value.replace(/\.{2,}/g, ".");
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    if (obj.value.length > 11) {
        obj.value = obj.value.substring(0, 11);
    }
}

60秒倒针时

应用：主要应用于获取手机号验证码。

html代码：

<button class="code-btn send_code" type="button" disabled="disabled" onclick="code(this)">发送验证码</button>

js代码：

function code(obj) {
    let count = 60,
    timer = null;
    if (timer == null) {
        timer = setInterval(function() {
            count--;
            $('.send_code').text(count + " 秒").attr('disabled', 'disabled');
            if (count <= 0) {
                clearInterval(timer); //停止定时
                $('.send_code').text("获取验证码");
                clearInterval(timer);
                $(".send_code").removeAttr("disabled");
            }
        },
        1000);
    }
}

实战一

通过上面的两个例子，下面我们来实战一个功能需求：
当输入框输入到11位手机号时，发送验证码的按钮高度起来。如果没有输入框没有达到11位的话，发送验证码的按钮会处于一直禁用状态。

html代码：

<input type="text" name="mobile" maxlength="11" minlength="11" autocomplete="off" placeholder="请输入手机号码" onkeyup="chekNum(this)">
<button class="code-btn send_code" type="button" disabled="disabled" onclick="code(this)">发送验证码</button>

jq代码：

$("#mobile").focus(function() {
    time = setInterval(function() {
        var value = $("#mobile").val();
        if (value.length == 11) {
            $(".send_code").removeAttr("disabled");
        }
    },
    500);
}).blur(function() {
    console.log("clearInterval");
    clearInterval(time);
})

在使用 jq 的时候请自行引入jq。在这里我只拿出最重要的代码。

键盘回车事件

$(document).keydown(function(event) {
    if (event.keyCode == 13) {
        console.log('键盘回车事件');
    }
});

跳转页面

原来的窗口中直接跳转

window.location.href="你所要跳转的页面";