最近在做一个电商站,里面有社交功能。其中有发表说说的功能,要限制字数。当然就需要用JS来实时计算咯,这个功能在以前某个项目做过,但是一时找不到了,又重做一遍,未免这事以后继续发生,做个总结,以待后用。
话不多说,直接附源码。首先是html代码(这里是测试用html,直接用style写了点样式)。
<span style="font-size:20px;font-weight:bold;">我的说说</span>
<span style="margin-left:50%;" id="wordsCount">您还可以输入140个字</span>
<textarea name="dynamicContent" id="dynamicContent" style="height:90px;"></textarea>
<br/>
<input type="button" value="发表" id="submit_add_dynamic"/>
下面就是JS代码了。
<script type="text/javascript">
$(function(){
$("#dynamicContent").keyup(function(event){
var totalWordsCount = 140;
var dynamicContent = $("#dynamicContent").val();
var dynamicContentLength = dynamicContent.length;
var wordsCount = 0;
for (var i=0; i<dynamicContentLength; i++) {
var charCode = dynamicContent.charCodeAt(i);
if ((charCode >= 0x0001 && charCode <= 0x007e) || (0xff60<=charCode &charCode<=0xff9f)) {
wordsCount+=0.5;
}else {
wordsCount++;
}
}
var leftWordsCount = totalWordsCount - Math.ceil(wordsCount);
if(leftWordsCount >= 0) {
$("#wordsCount").html("您还可以输入"+leftWordsCount+"个字");
$("#submit_add_dynamic").attr("disabled",false);
} else {
leftWordsCount = Math.ceil(wordsCount) - totalWordsCount;
$("#wordsCount").html("已经超过"+leftWordsCount+"个字");
$("#submit_add_dynamic").attr("disabled","disabled");
}
});
});
</script>
这点代码就结束了。记录留用~