廣告廣告
  加入我的最愛 設為首頁 風格修改
首頁 首尾
 手機版   訂閱   地圖  簡體 
您是第 4940 個閱讀者
 
發表文章 發表投票 回覆文章
  可列印版   加為IE收藏   收藏主題   上一主題 | 下一主題   
keigo
個人頭像
個人文章 個人相簿 個人日記 個人地圖
初露鋒芒
級別: 初露鋒芒 該用戶目前不上站
推文 x0 鮮花 x71
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片
推文 x0
[JScript][討論] 計算字(元)數
常看到有些討論區會限制發言的最大字數,有可能是資料庫的欄位本身就有限制或是怕有人貼上大量文字的內容來搗亂。在網路上傳輸文字、圖片等等的資料都是要消耗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.html

http://abgne.myweb.hinet....009_2.html

http://abgne.myweb.hinet....009_3.html

以上內容於2005/10/01發表在小弟的Blog裡http://blog.xuite.net/abgne/diary1/4070061


[ 此文章被keigo在2005-10-06 17:02重新編輯 ]



歡迎各位參觀小弟的Blog男丁格爾's 脫殼玩
獻花 x0 回到頂端 [樓 主] From:台灣台灣索尼 | Posted:2005-10-02 00:38 |
Avery90
個人文章 個人相簿 個人日記 個人地圖
特殊貢獻獎
小人物
級別: 小人物 該用戶目前不上站
推文 x0 鮮花 x21
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

雖然之前知道怎麼用

但是沒有那麼詳細
Thx~~~ 表情


獻花 x0 回到頂端 [1 樓] From:台灣中華電信 | Posted:2005-10-06 19:27 |

首頁  發表文章 發表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.022123 second(s),query:16 Gzip disabled
本站由 瀛睿律師事務所 擔任常年法律顧問 | 免責聲明 | 本網站已依台灣網站內容分級規定處理 | 連絡我們 | 訪客留言