Textbox字數計算

James那邊看到一篇TextBox字數計算,
的確,使用者介面的友善也是關係著網站成敗.

只是,我不太喜歡將所有的東西都丟到後端處理,
在加上最近在玩lightbox時,
發現這些javascript的toolkit都只要將js包進來後,
在要呈現這樣效果的連結或是圖片加個rel或是class的屬性就可以用了,
所以就想說也來寫個方便使用的TextBox字數提示功能!!

現在直接說明怎麼使用.

步驟一 :

TbxLenLimit.js加到要使用的頁面

範例 :

<SCRIPT LANGUAGE="JavaScript" src="TbxLenLimit.js"></SCRIPT>

步驟二 :

在要呈現字數提示的textarea加上兩個屬性maxlength="字數上限"class="ShowLen"
ps.記得給textarea一個id

範例 :

<TEXTAREA NAME="tbx1" id="tbx1" ROWS="6" COLS="60" maxlength="600" class="ShowLen"></TEXTAREA>

線上demo : textarea_length.htm
範例下載 : TbxLenLimit.zip

如果有人對程式有興趣或是想要研究討論的,歡迎回應!!

Update:

新增限制字串長度的功能.
如果class為ShowLen則是提示,不會裁減字串,
如果class為ShowLenLimit則除了提示外,也會自動裁減字串到設定的長度.

update : (2006/9/21)

增加onchange的事件處理,以解決用滑鼠複製貼上時無法計算字數

update : (2008/6/23)

1.將檔案編碼格式給為utf-8.
2.增加MaxLen的設定屬性,功能等同MaxLength.
   主要是調整對asp.net中textbox的textmode=multiline時,設定maxlength會被清除的問題.

update : (2009/8/28)
修正當有輸入方塊中有預設內容時,並不會顯示現有字數


posted on 2008/4/1 20:13 | 閱讀數 : 28417 我要推薦 | 24 Comments | 分類 [ Javascript 技術相關 程式相關 網頁技術 ] 訂閱

Comments on this post

# re: Textbox字數計算

前輩您好:
可以請問您這支程式的一些問題嗎?
1.為什麼我將textarea改成textbox就會出現問題?
我發現它會讀不到MaxLength。
2.為什麼在textbox輸入完後,點到textbox外的區域時,
顯示字數的地方會變成紅色,目前字數會變成0,
textbox的內容會被消除?

煩請前輩解惑,真的是非常的感謝。
小弟使用VS 2008 ASP.NET C# 開發網頁。
Left by zack on 四月 27, 2008 11:15 上午
回覆

# re: Textbox字數計算

1.因為textbox跟textarea在html的標籤結構不太一樣,
所以這程式目前還沒針對textbox做處理,
所以現在只能使用在textarea上.

2.可以說一下你的環境嗎?瀏覽器的版本?
因為我這邊在ie7跟firefox上測試都是正常,不會有你說的情況.
測試網址 : http://ajunlee.googlepages.com/textarea_length.htm

Left by ajun on 四月 27, 2008 11:41 上午
回覆

# re: Textbox字數計算

前輩您好:
所以目前無法對TextBox做相同的處理嗎?
要改會相當的麻煩嗎?
我是使用ie7,會不會也是因為TextBox的關係?
Left by zack on 四月 27, 2008 11:50 上午
回覆

# re: Textbox字數計算

因為textbox已經就有個maxlength可以設定它的字數限制.
所以就沒有打算在去做這樣的功能.

至於改會不會相當麻煩,我是覺得還好.
比較麻煩的都已經做完了.
只是要加些條件而已

Left by ajun on 四月 27, 2008 12:57 下午
回覆

# re: Textbox字數計算

前輩您好:
可以請前輩指導嗎?
還有我剛有想到一個很笨的方式,
就是將它寫死,我把本來應該動態讀maxlength的地方寫死,
像是直接寫我希望限制的字數ex:100,我發現這樣是可行的,
但比較沒彈性就是了。
我在測試的時候都可以用,但我放入我的程式後就不行了,
因為我是要使用在DataList的TextBox中,會不會是因為是在DataList中而無法使用?
請前輩指導,非常感謝。
Left by zack on 四月 27, 2008 1:06 下午
回覆

# re: Textbox字數計算

前輩您好:
不好意思,我補充一下,我是要將字數限制顯示在DataList中的editTemplate裡的TextBox。
Left by zack on 四月 27, 2008 1:18 下午
回覆

# re: Textbox字數計算

如果要寫成是使用textbox的話,
應該是比較簡單,
因為目前的作法是

1.取得textarea的設定,
2.在textarea的前方加個div用來顯示提示訊息,
3.增加textarea的  onkeypress 跟onchange的事件處理
4.在事件處理中計算字數並限制字數

而使用textbox的話,就不需要去限制字數,因為textbox本身就有限制的功能.

另外,如果是要使用asp.net的話,
也可以直接包成usercontrol,
將textbox跟div包在一起,
直接在textbox寫好事件的處理.
這樣要做的事情就只剩下javascript的統計字數.

而在datalist中使用的話,
比較有問題的應該是textbox的id問題.
只要確定可以取得物件唯一的id應該就沒有甚麼問題了.

Left by ajun on 四月 28, 2008 1:04 下午
回覆

# re: Textbox字數計算

to zack,

我已經把程式做了一些修改,
現在也已經可以在textbox上使用.
範例 : textarea_length.htm

我想在asp.net上應該也是沒有問題.
即使包在datalist裡面.
 

Left by ajun on 四月 30, 2008 4:18 下午
回覆

# re: Textbox字數計算

您好,請問我將您的程式套到.NET 2.0裡去用,卻會發生編碼錯亂的情形,我程式原本是用UTF-8,如果在IE去切換編碼成BIG5就能正常,但是反而變成我程式的中文字變成亂碼.....
Left by 哄哄我 on 六月 20, 2008 4:15 下午
回覆

# re: Textbox字數計算

to 哄哄我,

因為檔案我並沒有特別設定編碼,
所以他用ANSI的格式儲存了.
現在我的上傳空間有點問題,沒辦法傳utf8編碼的,

所以你可以用記事本開啟那個js檔,選擇另存新檔.
然後在儲存的畫面中選擇存檔編碼格式,
將它給為utf-8應該就可以了

晚點我找出google pages為什麼沒辦法傳檔案的原因後在上傳.

Left by 孤影 on 六月 20, 2008 4:41 下午
回覆

# re: Textbox字數計算

抱歉又是我...上面提到的問題有點複雜,我是想把字數計算功能放在ASP.NET 2.0的表單當中,程式如下:

<asp:TextBox ID="introductionTextBox" runat="server" Text='<%# Bind("introduction") %>' Width="640px" Height="100px" TextMode="MultiLine" maxlength="255" class="ShowLen"></asp:TextBox>

除了亂碼問題外,還有不會正確顯示勝於自述的問題,而且CLASS也不是TEXTBOX的有效屬性。阿阿阿~
Left by 哄哄我 on 六月 20, 2008 5:35 下午
回覆

# re: Textbox字數計算

第一次載入表單顯示:
目前字數 : 0, 剩餘字數 : null

開始輸入內容(7個字)後:
目前字數 : -7, 剩餘字數 : -7

如果把游標點到別的TEXTBOX裡:
原先輸入的內容會被清空,並且顯示成第一次載入的樣子,還會變成紅色字。

是不是這個JS不能放在ASP .NET 2.0裡使用??

PS.亂碼問題解決了,感謝~
Left by 哄哄我 on 六月 20, 2008 5:47 下午
回覆

# re: Textbox字數計算

在asp.net中,
textbox的class要用cssclass

而textbox如果TextMode="MultiLine"的話,
如果有設定maxlength也會被清除,
因為textarea並不支援maxlength的屬性,

所以這個可能要寫code去增加屬性,
在page_load的時候增加下面的語法.

this.TextBox2.Attributes.Add("MaxLength","200");

我有在修改一些功能,
新增使用MaxLen來設定.
所以如果是textmode=multiline的話,
可以改用maxlen來設定字數限制.

檔案 : http://ajunlee.googlepages.com/TbxLenLimit.zip

Left by ajun on 六月 23, 2008 10:12 上午
回覆

# re: Textbox字數計算

可以了~可以了~您真是小弟的救星啊!! 完全正常運作了!!感激不盡!!
Left by 哄哄我 on 六月 23, 2008 5:28 下午
回覆

# re: Textbox字數計算

輸入中英文都算一個字, 可中文是2byte
輸入:一二三123
目前字數 : 6
如何取得byte數?(即顯示 目前輸入 : 9 byte)
Left by 肉包子 on 七月 08, 2008 10:09 上午
回覆

# re: Textbox字數計算

站長您好:
  跟你請教一下,我是寫asp.net
  我目前用1個textbox1,有成功顯示出所有數據
  目前我有一個問題是,我希望
  目前字數:xx、剩餘字數:xx
  這些訊息能夠由我的Label1來顯示,請問如何實作呢?
Left by Mr.謝 on 五月 14, 2009 10:59 上午
回覆

# re: Textbox字數計算

to Mr.謝 :
目前顯示訊息是動態產生的,
所以如果要指定Label來顯示的話,
需要修改js,
把動態產生div的部分改寫成可接收設定,
指定object的id.
只是這樣的話,
在一開始的textbox的屬性就要再增加,
讓初始化的時候可以知道textbox的結果訊息要丟到哪個label.

以上是目前所想到的作法,
還沒有實際修改...
你可以試試看.

Left by ajun on 五月 14, 2009 12:52 下午
回覆

# re: Textbox字數計算

我的問題跟哄哄我相同,但我加了TextBox2.Attributes.Add("MaxLength","200");

第一次載入表單顯示(從資料庫中讀入資料後):
目前字數 : 0, 剩餘字數 : 200
-->畫面上有顯示資料,但是怎麼會SHOW 目前字數 : 0

但在TextBox2中修改輸入內容後,字數計算就就一切正常!!!

請問這該如何解決??
是因為的TextBox2是在UserControl中的關係嗎??
Left by 請問 on 八月 26, 2009 4:32 下午
回覆

# re: Textbox字數計算

我剛試了沒有UserControl的也是不行,所以問題應該不在UserControl

如果不是從DB中讀出來,用下面寫法一開始時字數也是顯示0
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add("MaxLength", "250");
TextBox1.Text = "ABCD";
}
Left by 請問 on 八月 26, 2009 6:23 下午
回覆

# re: Textbox字數計算

to 請問 :

主要是因為目前沒有在一載入時就去判斷字數,

晚點再來加些功能.

Left by ajun on 八月 28, 2009 11:24 上午
回覆

# re: Textbox字數計算

非常感謝您的分享!!
Left by Una on 十一月 18, 2009 9:18 上午
回覆

# re: Textbox字數計算

想問一下
我把TextBox放在GridView中
在GridView的RowDataBound事件裡
TextBox名稱.Attributes.Add("class","ShowLenLimit")
TextBox名稱.Attributes.Add("MaxLen","100")
但是程式一執行時
TextBox上方卻不會出現計算字數的字樣
想問原因為何?
Left by Zheng on 二月 04, 2010 4:33 下午
回覆

# re: Textbox字數計算

您好

我是使用ASP.net開發留言版
留言版使用UpdatePanel非同步更新來實做
目前遇到得情況是當送出留言後,字數計算功能失效,
"目前字數剩餘字數"的字串訊息也不見了,
請問當非同步更新後,如何重新呼叫此功能
謝謝
Left by howard on 九月 03, 2010 11:20 上午
回覆

# re: Textbox字數計算

您好
我是使用C#.NET 開發留言版
留言版使用UpdatePanel非同步更新來實做
目前遇到得情況是當送出留言後,字數計算功能失效,
"目前字數剩餘字數"的字串訊息也不見了,
請問當非同步更新後,如何重新呼叫此功能
謝謝
Left by smallhwa on 五月 13, 2011 5:16 下午
回覆

回應:

Please add 1 and 1 and type the answer here: