常看到有些討論區會限制發言的最大字數,有可能是資料庫的欄位本身就有限制或是怕有人貼上大量文字的內容來搗亂。在網路上傳輸文字、圖片等等的資料都是要消耗Server端及網路流量的資源,試想一下,有篇文章是10萬字,若資料是存在資料庫上的話,光是查詢後要回傳給Client端,醬子要開啟一篇網頁不知道要等上多久的時間了,所以才會做出最大字數的限制。
要做字數的檢驗又可以分為前端及後端兩種,前端就是用JavaScript、VBScript等在文章未被送出前來做檢驗;後端的話就是靠JSP、PHP、ASP等程式來做檢驗。不過用後端檢驗的話,因為文章是已被傳送出去了,若檢驗失敗的話,醬資料往返其實也是在浪費資源,但並不表後端檢驗不好。若可以的話,比較建議是在文章送出前就先檢驗一次,到後端的話,若還是不放心還可以再做一次的檢驗。
那要如何來算出字數呢?常見的做法是當按下送出時會計算字數長度,或者是每當輸入一個字時,就顯示目前輸入了多少字。我採取兩種方法一起來使用。
要做成每輸入一個字就計算字數的話,比較常用的Event是onKeyDown、onKeyUp、onKeyPress等三種。檢驗部份的Code都一樣,只是差在所觸發的Event是不同的罷了,但也因為Event不同,所以會有點差異,這等等會說明。
好~一樣先來看Body部份的Code吧:
Div是用來放置訊息用的,總是要有地方顯示輸入多少字吧。TextArea是一個輸入框,目前我使用的Event是onKeyUp,當keyUp時會觸發count()函式並把TextArea的值當做參數傳進去。按鈕被Click時也會觸發一個check()函式來檢驗是否在限制的字數內。
再來看JavaScript的部份:
這個JavaScript蠻簡單的,用變數maxChr來設定最多可輸入多少字,變數nowChr來儲存目前已輸入多少字,而count()函式則是計算目前輸入多少字並把訊息顯示在Div中,check()函式則是當按下送出鈕時,用來檢驗是否目前輸入的字數是否小於等於maxChr,若大於maxChr則警告說多輸入了幾個字,最後的部份是用來初始化當剛載入頁面時Div用的。
應該不難懂上面的Code吧,沒用到什麼比較特殊的東西,試著執行看看後會發現,每輸入一個字的話,會馬上計算目前已輸入多少字,但是~假設按下a按鍵卻不放開的話,TextArea內會一直被出現aaaaa.......可是Div的訊息卻都沒變,也就是沒計算字數,不過當放開A按鍵的話,就會計算字數了。
為什麼會醬呢?這是因為在TextArea中用的Event是onKeyUp,也就是只有當按鍵被放開時才會觸發它。
OK~若是把Event改成onKeyDown或是onKeyPress呢?onKeyDown跟onKeyPress是當按鍵被按下時就會觸發了,嘿嘿~這下就算按著不放也能計算字數了吧!沒錯~改成醬雖能解決按住不放的問題,但~不知道眼尖的你有沒有發現所計算出來的字數少了一個字?
那要怎麼辦呢?把計算出來的字數再加1嗎?還是在TextArea中用onKeyUp及onKeyDown或是onKeyPress呢?這兩個方法其實都可以用來解決問題,但還有一個更好的Event可以用-onPropertyChange。什麼是onPropertyChange呢?這Event是用當某物件的屬性值被改變時會觸發的。
現在把TextArea中的Event改成用onPropertyChange後再來試試剛剛以上兩種情況吧,嘿~都是能正確的計算出字數吧。onPropertyChange才是今天這主題的重點。
最後的送出鈕只是最很簡單的判斷,各位應該看的懂也知道怎麼改吧!
還有個問題是...用醬的判斷字數的話,不管是1個字元還是2個字元都會被當成一個字,像a(半形)就是1個字元,而a(全形)卻是2個字元,若資料庫中欄位是設成30個字元的話,用來存放1個字元的字可以放30個,但是2個字元只能存放15個,那混合的話要怎麼計算呢?
首先要知道在ASCII中,0~255都是1個字元的字,255以後的都是2個字元,現在只要在count()函式中判斷輸入的字是共字元,而maxChr及nowChr則變成是最大幾字元及目前已輸入幾字元。
醬子改過後,就能算出所輸入的字共幾個字元了。有兩種方法來計算字數,要使用那種就看各位的需求了。
範例瀏覽:
http://abgne.myweb.hinet....009_1.htmlhttp://abgne.myweb.hinet....009_2.htmlhttp://abgne.myweb.hinet....009_3.html以上內容於2005/10/01發表在小弟的Blog裡
http://blog.xuite.net/abgne/diary1/4070061