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

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

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