模仿新浪微博字数限制提示

最新推荐文章于 2025-05-03 08:30:00 发布

原创最新推荐文章于 2025-05-03 08:30:00 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#textarea #字数限制

Java EE 专栏收录该内容

48 篇文章

订阅专栏

本人很喜欢上微博，出于职业病的原因，往往对微博字数限制的功能实现感兴趣。虽说实现该功能不算太难，但是想跟做是两回事儿，于是我就有了模拟新浪微博字数限制功能实现的想法！

实现过程以及解决出现的问题特此记录一下：

输入页面：

<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse"  cellSpacing=0 rules=all  border=0  class="tb_datalist">
  	<span id="inputTip"><font color="red">*你还能输入140个字</font></span> 
  	<tr>
  		<textarea id="input" rows="5" cols="35" onKeyDown="textCounter()" onKeyUp="textCounter()"></textarea>
   	</tr> 
   	<input id="btn" type="submit" value="发布" disabled="disabled" />
  </table>

js:

function textCounter() {
	var msg = $("#input").val();
	var length = 0;
	if(msg == "") {
    	   $("#inputTip").html("*你还能输入140个字").css({color:"red"});
           $("#btn").attr("disabled", true);
           return;
        }
	for(var i=0; i<msg.length; i++) {
	//中文及中文标点算2个字符
	   if(msg.charCodeAt(i) > 255) {
		length += 2;
	   }else{
		length ++;
	   }
	}
	var count;
	//字数在合理范围时，提示信息为用户还能输入的字数，"发布"按钮可用
	if(length>0 && length<=140) {
	   count = 140 - length; 
	   $("#inputTip").html("*你还能输入"+count+"个字").css({color:"red"});
	   $("#btn").attr("disabled", false);
	}		
        //超出限定字数时，"发布"按钮不可用，提示信息改变
	if(length > 140) {
	  //alert("length:" + length);
	  count = length - 140; 
	  $("#inputTip").html("*超过"+count+"个字").css({color:"red"});
	  $("#btn").attr("disabled", true);
	}
}

出现的问题：

1）使用jQuery动态改变提示信息时，用$("#inputTip").innerHTML("<font color="red">xxx</>")无效，后来发觉这是原始js的写法，遂改成$("#inputTip").html("xxx").css(" "," ")的写法，达到了改变提示文本的效果；

2）初始光标位置不在顶格，发现原来的textarea写成这样：

<textarea id="input" rows="5" cols="35" onKeyDown="textCounter()" onKeyUp="textCounter()">
</textarea>

即textarea的开始和结束标签换行了，应该写在同一行：

<textarea id="input" rows="5" cols="35" onKeyDown="textCounter()" onKeyUp="textCounter()"></textarea>

才不会出现这个问题！

3）js代码中if(msg == "") return;
必须加上，因为初始状态是没有任何输入的，如果没有此判断，直接进行for循环会出错！

实现效果：

初始状态：

字数未超出限制状态：

字数超出限制状态：