網頁在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()); });

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

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


Comments

# by 月讀

$("<div><textarea id='demo01'></textarea></div>").appendTo("body"); $("#demo01").text("OKOK\rYEYE"); alert($('#demo01').val()); 我總結出來的是 set - 使用 text( ) get - 使用 val( )

# by xj

我試了一下ie6.0版的text("A\nA")會換行呢? \n只空一格.是用哪一版ie呢

# by Jeffrey

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

# by 塵世迷途小PG

$("<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有時間差...(亂猜 獻醜了

# by

大大 . clone 不能copy select 的值... 這部份 有解嗎?

# by Jeffrey

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

# by

http://fligtar.com/testcases/jquery-clone.html 請參考...

# by

http://fligtar.com/testcases/jquery-clone.html 請參考...

# by Wolf

如果用 "\r\n" 呢? 我記得在windows底下的換行標記是"\r\n" :D

Post a comment