zoukankan      html  css  js  c++  java
  • 利用 keyCode 和 正则 控制数字输入框

    <!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>
    

      

    author:Lik
    Endeavoring to powerless, struggling to move yourself.
  • 相关阅读:
    43、生鲜电商平台-你应该保留的一些学习态度与学习方法
    44、生鲜电商平台-Java后端生成Token架构与设计详解
    42、生鲜电商平台-商品的spu和sku数据结构设计与架构
    Bag of features:图像检索
    立体视觉—计算视差图
    三维重建——对极几何与基础矩阵
    计算机视觉——相机参数标定
    图像的拼接融合
    Unity Hub安装异常的解决方案
    针对“需要管理权限才能删除文件夹”的解决方案
  • 原文地址:https://www.cnblogs.com/likwin/p/7221560.html
Copyright © 2011-2022 走看看