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()); });
很醜,但看來是有效的! 如果有人有其他好點子,再分享一下吧!
【心得】沒有劈成一字馬的本事,不要跟別人說你會"跨"瀏覽器!