jQuery Textarea - 該用val()還是text()

網頁在FF下不正常,搞了半天才發現問題出在我使用val()指定Textarea的內容,畫面顯示看來一切OK,但經過clone()後,內容值卻消失了。

我整理出以下的範例做測試: (可用Mini jQuery Lab直接執行)

$("<div id='x1'><textarea id='t1'></textarea>" + 
"<textarea id='t2'></textarea></div>").appendTo("body");
$("#t1").text("AAA");
$("#t2").val("BBB");
alert("t1=" + $("#t1").text() + "/" + $("#t1").val());
alert("t2=" + $("#t2").text() + "/" + $("#t2").val());
alert($("#x1").html());

在IE下,不管用val()或text()設定,後續的讀取都正常;但在Firefox下,使用val()指定的值,畫面上會出現,但是用text()或是透過html()檢視時卻是字串。因此在Firefox中,如果你希望設定給textarea值出現在html()中或可以被clone(),請用text(...)設定。

且慢!! 事情如果這麼單純,那麼連小學生也會跨瀏覽器了。使用text()設定時得注意換行問題,若你在IE中下text("A\nA"),在顯示時只會呈現空一格而不會換行。依我測試的結果,在IE下text("A\r\A")得到顯示結果比較接近預期,但是text("A\rA")在Firefox中顯示時會換列,用text()取出時卻是連在一起的... 這... 這... 這...

最後,我採取了懦夫策略,在呼叫.clone()前做了這件事迴避問題:

$theDiv.find("textarea").each(function() { $(this).text($(this).val()); });

很醜,但看來是有效的! 如果有人有其他好點子,再分享一下吧!

【心得】沒有劈成一字馬的本事,不要跟別人說你會"跨"瀏覽器!

歡迎推文分享:
Published 11 June 2009 07:13 PM 由 Jeffrey
Filed under: , , ,
Views: 67,511



意見

# 月讀 said on 11 June, 2009 05:33 AM

$("<div><textarea id='demo01'></textarea></div>").appendTo("body");

$("#demo01").text("OKOK\rYEYE");

alert($('#demo01').val());

我總結出來的是

set - 使用 text( )

get - 使用 val( )

# xj said on 12 June, 2009 02:07 AM

我試了一下ie6.0版的text("A\nA")會換行呢?

\n只空一格.是用哪一版ie呢

# Jeffrey said on 12 June, 2009 10:13 AM

to xj, 我在IE8裡,用標準模式或IE7相容模式,text("A\nA")在畫面上只有空一格。

# 塵世迷途小PG said on 15 June, 2009 02:49 AM

$("<div id='x1'><textarea id='t1'></textarea>").appendTo("body");

$("#t1").html("test\n0615");

//var _copy = $("#t1").clone(true);alert(_copy.text());

setTimeout(function(){var _copy = $("#t1").clone(true);alert(_copy.val());}, 1);

我是用大絕"定時炸彈"...XD

大大可以先試run mark那行,

我估記是JQ在實現append有時間差...(亂猜

獻醜了

#said on 28 July, 2009 05:05 AM

大大 .

clone 不能copy select 的值...

這部份 有解嗎?

# Jeffrey said on 28 July, 2009 07:51 AM

to 文, "clone 不能copy select 的值..." <-- 不甚理解。

#said on 28 July, 2009 07:30 PM

fligtar.com/.../jquery-clone.html

請參考...

#said on 28 July, 2009 07:31 PM

fligtar.com/.../jquery-clone.html

請參考...

# Wolf said on 15 May, 2010 09:19 PM

如果用 "\r\n" 呢?

我記得在windows底下的換行標記是"\r\n" :D

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2009>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication