zoukankan      html  css  js  c++  java
  • 限定文本框内只能输入15位数字

    想要实现限定文本框内只能输入15位的数字的效果。但是现在实现的情况是只能限定不能输入英文字母,还不能限制汉字的输入,从网上找到的资料看来,需使用正则表达式来判断。不建议使用依赖keycode的判断,因为粘贴、中文输入法、自动填表等都是不触发key事件的。

    而且限定的length是15,却能输入17位数字

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>限制用户只能输入数字</title>
        <link href="../../css/main.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/rawJavascript.css" rel="stylesheet" type="text/css"/>
        <script src="../../js/util.js"></script>
    </head>
    <body>
    <div class="content-box numOnly">
        <form id="form1">
            <div class="list-item">
                <label for="numOnly">限定只能输入15位数字</label><input id="numOnly" type="text"/><span class="delete fl" title="清除" >×</span>
                <span id="info" class="info"></span>
            </div>
        </form>
    </div>
    <script>
        var str = '';
        window.onload = function () {
            var form1 = document.getElementById('form1');
            var numOnly = document.getElementById('numOnly');
            var delBtn = getByClass(form1,'delete');
    
            numOnly.onkeydown = function (ev) {
                var oEvent = ev||event;
                if(str.length<=15){
                    if((oEvent.keyCode>=48)&& (oEvent.keyCode<=57)||((oEvent.keyCode>=96)&&(oEvent.keyCode<=105))||(oEvent.keyCode==8)){
                        str = numOnly.value;
                        if(str.length>0){
                            showDel(delBtn[0],numOnly);
                        }else{
                            disDel(delBtn[0]);
                        }
                    }else{
                        info.innerHTML = "只能输入15位";
                        return false;
                    };
                }
                else{
                    return false;
                }
            };
            numOnly.onfocus = function () {
                if(str.length>0){
                    showDel(delBtn[0],numOnly);
                };
            };
            
            numOnly.onblur = function () {
                disDel(delBtn[0]);
            }
        };
    
        function showDel(obj, functor ) {
            obj.style.display = "block";
            obj.onclick = function () {
                functor.value = "";
                str = '';
            };
        };
    
        function disDel(obj) {
            obj.style.display = "none";
        };
    </script>
    </body>
    </html>

    css样式

    .numOnly {
        position: relative;
    }
    .list-item{
        position: relative;
        display: inline;
    }
    .list-item input{
        padding-right: 20px;
        letter-spacing: 2px;
    }
    .list-item .info{
        display: block;
        color: #eb4960;
    }
    .numOnly .delete{
        position: absolute;
        right: 1px;
        margin-top: -22px;
        padding: 0px 5px;
        cursor: pointer;
        display: none;
    }
    .numOnly .delete:hover{
        background: #eeeeee;
    }

    -------------找到正确的实现方法时会补充---2016-06-29-----------------------------------------

  • 相关阅读:
    windchill系统安装大概步骤
    Javase、Javaee、Javame的区别
    Cocoa Touch事件处理流程--响应者链
    iOS KVC & KVO
    GET异步 请求图片步骤
    iOS7——图像资源Images Assets
    IOS编程教程(八):在你的应用程序添加启动画面
    Objective C内存管理之理解autorelease------面试题
    runtime 运行时机制 完全解读
    图片的异步下载
  • 原文地址:https://www.cnblogs.com/viola-sh/p/5627221.html
Copyright © 2011-2022 走看看