js限制输入框字数

最新推荐文章于 2024-05-14 15:29:40 发布

李逸风

最新推荐文章于 2024-05-14 15:29:40 发布

阅读量1.1w

点赞数 3

分类专栏：插件代码文章标签： js 输入框限制字符

插件代码专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

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

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

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

<html lang='en'>
	<head>
		<meta charset='utf-8'/>
		<title>demo</title>
		<style type="text/css">
		.sr { width: 300px; height: 300px; padding: 10px; outline: none; border: 1px solid #D4D4D4; background-color: #F3F3F3; }
        </style>
		
	</head>
	<body>

     <!-- onkeyUp="textLimitCheck(this, 20);" -->
    <textarea name="sca" class="sr" cols=45 rows=10 id="praiseName"></textarea>
        <br>
		 <font color=#666666>限 6 个字符  已输入 <font color="#CC0000"><span id="info_limit">0</span></font> 个字</font>

		 <script>
		 /* function textLimitCheck(thisArea, maxLength){
			if (thisArea.value.length > maxLength){ 
			 alert(maxLength + ' 个字限制. \r超出的将自动去除.');   
		   thisArea.value = thisArea.value.substring(0, 20); 
			 thisArea.focus();    }    /*回写span的值，当前填写文字的数量*/  
		  /*messageCount.innerText = thisArea.value.length; 
		 }*/

		//控制字数
		var lim = new limit();
		lim.txtNote = document.getElementById("praiseName");   
		lim.txtLimit = document.getElementById("info_limit");  
		lim.limitCount = 6;
		lim.init();
		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(){txtLimit.innerText = txtNote.value.length;};
		        txtNote.onkeyup = function(){txtLimit.innerText = txtNote.value.length;};
		    }
		}
		</script>
	</body>
</html>

/**

* 2017/6/17 更新

**/

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

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

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

<textarea name="sca" class="sr" cols=45 rows=10 id="praiseName" onblur="onsubstring();"></textarea>

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文件放到页面最后、</body>前面，并且jquery文件在最前面的一个。

李逸风

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
js限制输入框字数

由于需要用到限制输入框的字数然后就到网上找了一段代码，可以用，但是发现有问题，不能输入超过限制的字符，这样就不能忍了。拼音输入法的时候字还没打完就被限制了。于是我就改良了一下，注释的是原代码，没注释的是我改良后的代码。&lt;html lang='en'&gt; &lt;head&gt; &lt;meta charset='utf-8'/&gt; &lt;title&g...
复制链接

扫一扫