码迷,mamicode.com
首页 > 其他好文 > 详细

利用 keyCode 和 正则 控制数字输入框

时间:2017-07-22 16:54:55      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:char   doc   数字   正则   query   body   length   value   type   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lik-input-number</title>
</head>

<body>
<input type="text" class="lik_input_number" style="color:#ccc" value="请输入数字" onfocus="fn_focus(this);"
       onblur="fn_blur(this);">
</body>

<script src="jquery-1.8.1.min.js"></script>
<script>

    // 输入框模拟placeholder

    function fn_focus(ele) {
        if (ele.value == ele.defaultValue) {
            ele.style = "color:#333";
            ele.value = ‘‘;
        } else {
            ele.style = "color:#333";
        }
    }

    function fn_blur(ele) {
        var reg = /^[s]*$/;
        if (reg.test(ele.value) || ele.value == ele.defaultValue) {
            ele.style = "color:#ccc";
            ele.value = ele.defaultValue;
        } else {
            ele.style = "color:#333";
        }
    }

    $(function () {
        $(‘.lik_input_number‘).live(‘keydown‘, function (e) {
            //控制第一个数字不能为0
            if ($(this).val().length > 1 && $(this).val().slice(0, 1) == 0 && $(this).val().slice(1, 2) != ‘.‘) {
                $(this).val($(this).val().slice(1, $(this).val().length));
            }
            //中文输入状态
            $(this).val($(this).val().replace(/[^0-9\.]/g, ‘‘));
            //控制只能输入数字、小数点、负号
            if ((e.keyCode < 48 || (e.keyCode > 57 && e.keyCode < 96) || (e.keyCode > 105 && e.keyCode < 109) || (e.keyCode > 110 && e.keyCode < 189) || e.keyCode > 190) && e.keyCode != 8) {
                return false;
            }
        });
        $(‘.lik_input_number‘).live(‘keyup‘, function (e) {
            //控制第一个数字不能为0
            if ($(this).val().length > 1 && $(this).val().slice(0, 1) == 0 && $(this).val().slice(1, 2) != ‘.‘) {
                $(this).val($(this).val().slice(1, $(this).val().length));
            }
            //中文输入状态
            $(this).val($(this).val().replace(/[^0-9\.]/g, ‘‘));
            //控制只能输入数字、小数点、负号
            if ((e.keyCode < 48 || (e.keyCode > 57 && e.keyCode < 96) || (e.keyCode > 105 && e.keyCode < 109) || (e.keyCode > 110 && e.keyCode < 189) || e.keyCode > 190) && e.keyCode != 8) {
                return false;
            }
        });
    });
</script>
</html>

  

利用 keyCode 和 正则 控制数字输入框

标签:char   doc   数字   正则   query   body   length   value   type   

原文地址:http://www.cnblogs.com/likwin/p/7221560.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!