JS限制文本输入框，并显示剩余可输入字符数-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_8856/article/details/81929622

本文介绍了一个基于JQuery的文本输入计数插件，该插件能够实时更新剩余字符数并在达到最大限制时截断输入。适用于新建页面及编辑页面场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery的扩展函数，很强悍：

http://pure-essence.net/stuff/webTips/dodosTextCounter/index.html

普通情况，即新建页面：

<p>
    <label for="phone">*Message:</label>                                                                      
    <textarea class="textfield" id="comments" name="comments" rows="8" cols="35"></textarea>                                   
     <div style="padding-left:300px"><span id="counter">2048 characters left</span><br/></div>
</p>

<script language="javascript">
<!--
document.getElementById("comments").value = "";
var ppl=70
var maxl=2048
document.onkeydown=function(){
   var s=document.getElementById("comments").value.length +1;
   if(s>maxl)document.getElementById("comments").value=document.getElementById("comments").value.substr(0,maxl-1)
   else document.getElementById("counter").innerHTML=(maxl-s)+" characters left"
}
function cha(){
var txt=document.getElementById("comments").value,tl=txt.length;
var txtArray=[],k=(tl/ppl<=1)?1:Math.ceil(tl/ppl);
for (var i=0;i<k;i++){
txtArray[i]=txt.substr(i*ppl,ppl);
alert(txtArray[i]) ;
}
document.getElementById("comments").value=""
document.getElementById("counter").innerHTML=""
}
//-->
</script>

特殊情况，即在编辑页面，文本框同时需要显示文字。所以在JavaScript代码开始部分必须考虑到这个情况：

<dl class="description">
        <dt><label for="email">Description</label></dt>
        <dd><textarea id="description" name="description" cols="67" rows="4"><?= $biz->description ?></textarea>
        </dd>
</dl>
<dl class="char_limit">
         <dt id="counter">10240 characters left</dt>
</dl>

<script language="javascript">
	<!--
	
	var ppl=70;
	var maxl=10240;
	var s=document.getElementById("description").value.length +1;
	document.getElementById("counter").innerHTML=(maxl-s)+" characters left";
	
	document.onkeydown=function(){
	   var s=document.getElementById("description").value.length +1;
	   if(s>maxl)document.getElementById("description").value=document.getElementById("description").value.substr(0,maxl-1)
	   else document.getElementById("counter").innerHTML=(maxl-s)+" characters left"
	}
	function cha(){
	var txt=document.getElementById("description").value,tl=txt.length;
	var txtArray=[],k=(tl/ppl<=1)?1:Math.ceil(tl/ppl);
	for (var i=0;i<k;i++){
	txtArray[i]=txt.substr(i*ppl,ppl);
	alert(txtArray[i]) ;
	}
	document.getElementById("description").value="";
	document.getElementById("counter").innerHTML="";
	}
//-->
</script>