版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。
[html] view
plaincopy
效果如上面兩圖。
頁面代碼為：
<dd class="editabcont">
<textarea name="note" id="message" cols="" rows="" style="width: 370px; height: 128px; border: 1px solid #ccc"></textarea>
<p>
<em>optional</em><span><b id="num" style="color:#ff0000">8000</b> characters left</span></p>
</dd>
js代碼為：
[javascript] view
$(document).ready(function() {
initbind();
})
function initbind()
{
$("#message").blur(function(){ checkmessage();});
$("#message").keyup(function() { checkmessage(); });
$("#message").keydown(function() { checkmessage(); });
}
function checkmessage()
$("#num").html(8000 - $('#message').val().length);
var pattern = /[\s\s]{20,2000}/;
if($('#message').val().length != 0)
{
if(!pattern.test($('#message').val()) || $('#message').val().length < 20)
err = false;
$("#errmessage").show();
}
else
err = true;
$("#errmessage").hide();
if (err1 && err2 && err3 && err) {
$("#button1error").hide();
}
}
else
現在流行的twitter等微部落格網站，有一個很好的使用者體驗，就是在文本框中輸入文字的時候，會自動統計輸入的字元，并顯示使用者還能輸入的字元，在限制了140個字的微部落格中，這樣的小提示可以很好的增強使用者體驗。
如果實作這種技術呢，我進行了一些研究，發現實作其實挺簡單，幾行代碼就能完成輸入字元統計功能，經過實際測試，其對文字的統計與twitter等微部落格的完全相同。
使用方法是，先增加一個span，用于顯示剩餘的字數，然後在textarea中，加入一個onkeydown和onkeyup的事件，調用另一段javascript函數，函數調用的參數為span的id和textarea的id，然後再javascript中使用innerhtml傳回計算出來的剩餘字數。
核心javascript代碼：
複制代碼代碼如下:
<span style="font-size:18px;"><script language="javascript">
function countchar(textareaname,spanname)
{
document.getelementbyid(spanname).innerhtml = 140 - document.getelementbyid(textareaname).value.length;
}
</script>
可以輸入<span id="counter">140</span>字<br/>
<textarea id="status" name="status" rows="6" cols="40" onkeydown='countchar("status","counter");'
onkeyup='countchar("status","counter");'></textarea></span>