js限制输入框字数

由于需要用到限制输入框的字数

然后就到网上找了一段代码，可以用，但是发现有问题，不能输入超过限制的字符，这样就不能忍了。

拼音输入法的时候字还没打完就被限制了。

于是我就改良了一下，注释的是原代码，没注释的是我改良后的代码。

	
		
		
		
		
	
	

     
    
        

		 限 6 个字符  已输入 0 个字

		 
	

 

 

/**

 

   * 2017/6/17 更新

**/

用的时候发现一个BUG，就是输入法输入的时候，显示超出设置字数时进行截屏或者其他操作，操作完后，不会自动截取文字。所以来修补一下。

//---------------------------------------方法一------------------------------------------

在dom上加onblur事件，输入框失去焦点时再截取一次。

 

 

function onsubstring(){
	var txtNote = document.getElementById("praiseName");   
	var txtLimit = document.getElementById("info_limit");  
	var limitCount = 6;
	if (txtNote.value.length > limitCount) {
		var text = txtNote.value.substring(0, limitCount);
		txtNote.value = text;
		txtLimit.innerText = limitCount;
	};
};

 

 

//---------------------------------------方法二------------------------------------------
还有一个jquery解决办法，同样的解决方式只是代码是jquery

 

$('#praiseName').blur(function() {
    $this = $(this);
    var val = $this.val();
    var length = $this.val().length;
    var lengthNum = 30;//设置限制的字数
    //超过指定字数便截取
    if (length > lengthNum) {
        var text = $this.val().substring(0, lengthNum);
        $this.val(text);
        $('#info_limit').text(lengthNum);
    };
});

 

/*

 * 2017/6/28 更新

*/

由于需要验证去除空格，我用到了jquery的 $.trim() 方法，去除输入的文字前后空格，基本满足要求。

 

$('#praiseName').blur(function() {  
    $this = $(this);  
    var val = $.trim($this.val());  
    $this.val(val);//去除空格后，重新赋值
    var length = $this.val().length;  
    var lengthNum = 8;//设置限制的字数  
    //超过指定字数便截取  
    if (length > lengthNum) {
        var text = $this.val().substring(0, lengthNum);
        $this.val(text);
        $('#info_limit').text(lengthNum);
    }else{
        $('#info_limit').text(length);
    };
}); 

 

 

多次使用：

 

$("#XX").blur(function(){
    blurLength($(this), 20, $('#XX'));
});
$("#XX").blur(function(){
    blurLength($(this), 90, $('#XX'));
});

//验证输入框字符串
function blurLength(t, n, l){
    var val = $.trim($(t).val());
    $(t).val(val);//去除空格后，重新赋值
    var length = $(t).val().length;
    var lengthNum = n;//设置限制的字数
    //超过指定字数便截取
    if (length > lengthNum) {
        var text = $(t).val().substring(0, lengthNum);
        $(t).val(text);
        $(l).text(lengthNum);
    }else{
        $(l).text(length);
    };
}

 

 

 

 

 

/*

 * 2017/10/11 更新

*/

新的需求，需要在输入时判断只能输入数字和小数点。并且小数点后只保留两位

 

var lims = new limit();  
    lims.txtNote = document.getElementById("diningPrice");     
    lims.txtLimit = document.getElementById("diningPriceNum");    
    lims.limitCount = 5;  
    lims.mark = 1;  
    lims.init(); 
    function limit(){   
        var txtNote;//文本框  
        var txtLimit;//提示字数的input  
        var limitCount;//限制的字数  
        var mark;//判断标识
        this.init = function(){    
            txtNote = this.txtNote;     
            txtLimit = this.txtLimit;     
            limitCount = this.limitCount;   
            mark = this.mark;
            txtNote.maxLength = limitCount;  
            txtNote.onkeydown = function(){
                if (mark == 1) {
                    clearNoNum(txtNote);
                }
                txtLimit.innerText = txtNote.value.length;
            };  
            txtNote.onkeyup = function(){
                if (mark == 1) {
                    clearNoNum(txtNote);
                }
                txtLimit.innerText = txtNote.value.length;
            };  
        }  
    }  

    //过滤除数字和点外的其他输入内容
    function clearNoNum(obj){ 
        obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
        if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
            obj.value= parseFloat(obj.value); 
        }
    }

 

 

限制只能输入中文、英文和数字

function limit(){   
    var txtNote;//文本框  
    var txtLimit;//提示字数的input  
    var limitCount;//限制的字数  
    this.init = function(){    
        txtNote = this.txtNote;     
        txtLimit = this.txtLimit;     
        limitCount = this.limitCount;   
        txtNote.maxLength = limitCount;  
        txtNote.onkeydown = function(){
        	txtNote.value = txtNote.value.replace(/[^\u4E00-\u9FA5A-Za-z0-9]/g,'');
        	txtLimit.innerText = txtNote.value.length; 
        };  
        txtNote.onkeyup = function(){
        	txtNote.value = txtNote.value.replace(/[^\u4E00-\u9FA5A-Za-z0-9]/g,'');
        	txtLimit.innerText = txtNote.value.length; 
        };  
    }  
} 

 

 

 

 

新手提示：如果用jquery方法，需要导入jquery文件，dom上也不用加onblur事件。

 

 

    如果发现导入后还是没用，就把js文件放到页面最后、前面，并且jquery文件在最前面的一个。