zoukankan      html  css  js  c++  java
  • 验证输入字数有最大值限制并且有提示还能输入多少

                   <div class="labelRight">
                        <input  onkeyup="WST.checkLength(this,'size01',15,1)" class="labelRight_tzName" type="text" name="tzName" value="{$obj['suitName']}">
                        <input type="hidden" name="suitId" id="suitId" value="{$obj['suitId']}">
                        <p>还能输入<span id="size01">15</span></p>
                    </div>

    js部分:

    WST.computeLength = function (eleInput, maxLength, nativeCharSize) {
        var nativeCharRegexp = /[u4E00-u9FFF]/;
        var string, char, length = 0;
        var ele = (typeof eleInput == 'string') ? document.getElementById(eleInput) : eleInput;
        if(maxLength == undefined) {
            maxLength = ele.maxLength || 100;
        }
    
        if(nativeCharSize == undefined) {
            nativeCharSize = 2;
        }
    
        string = (ele.value || '').split('');
    
        for(var i = 0, count = string.length; i < count; i ++) {
            char = string[i];
            if(nativeCharRegexp.test(char)) {
                length += nativeCharSize;
            } else {
                length ++;
            }
        }
    
        return length;
    }
    
    WST.checkLength = function (target,id,maxLength,zhiJie) {
        var maxLength = maxLength || 120; // 这是允许输入的最大数
        var zhiJie = zhiJie || 1; //这是区分字节的 例如汉字是2字节
        var targetLength = WST.computeLength(target, maxLength, zhiJie); // 这个是已输入的字符
        var leftLength =maxLength - targetLength;
        if(leftLength<=0){
            var val = $(target).val().slice(0,maxLength);
            $(target).val(val);
            document.getElementById(id).innerHTML = 0;
            $(target).keypress(function(event){
                var event = event || window.event;
                return false;
            });
        }else{
            document.getElementById(id).innerHTML = leftLength; // 这里的size就是需要变换数字地方的Id
        }
    }
  • 相关阅读:
    Laravel 框架
    tp5
    jq关于对象类型的判断
    简易的 js 留言板
    学习任务
    实验报告:指针与地址
    C语言数据类型
    嗯,关于 nanxI 的50条~(算是自我介绍吧)
    初学C语言
    dropload.js
  • 原文地址:https://www.cnblogs.com/lst619247/p/8676543.html
Copyright © 2011-2022 走看看