本人很喜欢上微博,出于职业病的原因,往往对微博字数限制的功能实现感兴趣。虽说实现该功能不算太难,但是想跟做是两回事儿,于是我就有了模拟新浪微博字数限制功能实现的想法!
实现过程以及解决出现的问题特此记录一下:
输入页面:
<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循环会出错!
实现效果:
初始状态:
字数未超出限制状态:
字数超出限制状态: