JavaWeb視頻網站開發：吐槽牆模塊實時同步顯示已輸入字數

具體的效果是如下三圖所示這樣的，當向輸入框中輸入字符時，程序會自動計算已輸入的字符，並顯示至指定區域。實例可參見553影院吐槽牆

                                         圖1

                                           圖2

                                           圖3

接下來敘述實現上述效果功能所需代碼：

1.首先，定義一個位置來顯示已輸入的字符數

已輸入<span id="wordnum"><font color="red">0</font></span>字符，需小於<font color="red">245</font>字符且不爲空

2.接着，需要在輸入框中添加onkeyup監聽事件，以使鍵盤每敲擊一次就計算並顯示一次已輸入字數

onkeyup="writting()"

3.編寫js代碼，實現實時計算已輸入字符數量並賦值給第1步中定義的id爲wordnum中

/**
 * 設置輸入時已輸入內容字數
 */
function writting(){
	var co=document.forms.toast.value;//吐槽內容
	co=co+"";
	document.getElementById("wordnum").innerHTML="<font color=\"red\">"+co.length+"</font>";
}

OK，以上3步就可以實現這一酷炫功能啦，是不是超級簡單實用呀。