[ js ] 不同瀏覽器之間對於innerHTML的換行符號處理差異

看板Ajax作者vintw (陽光好青年)時間16年前 (2009/01/20 17:50)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串1/1

IE在透過innerHTML寫入值時，似乎會把換行符號(\n或是\r\n)轉為空白。一開始會發現這個問題，主要是發現某個頁面在使用ie瀏覽時會出問題，這個頁面透過jQuery取得某些物件的內容，而這些內容之中的換行符號是有意義的。大致的情形可以透過下面簡單的範例來重現： ============================範例一開始=============================== <html> <script type="text/javascript" src="jquery-1.3.js"></script> <span id="a">1st_line 2nd_line</span> <textarea id="test"></textarea> <input type="button" onclick="$('#test').val($('#a').text());"> </html> ============================範例一結束=============================== 在這個範例中，在我的Firefox3和Opera 9.60按下按鍵後，都可以正確的在textarea中，顯示出位在1st_line和2nd_line之間的換行；但是使用IE7時，1st_line和2nd_line之間卻變為一個空格。這點在jQuery 1.2.6以及1.3都是一樣的情形。後來又做了一些實驗，發現不透過jQuery，直接使用innerHTML也會有一樣的情形。請看下面簡單的範例： ============================範例二開始=============================== <html> <pre id="a"></pre> <hr> <span id="b">1st_line 2nd_line</span> <input type="button" onclick="document.getElementById('a').innerHTML = document.getElementById('b').innerHTML + '\r\n3rd_line'"> </body> </html> ============================範例二結束=============================== Firefox和Opera可以正確的把三行之間的兩個換行符號印出，而IE7卻會在原本應該是換行符號的位置，插入空白字元。目前的電腦只有這三種瀏覽器，其他瀏覽器的狀況歡迎各位幫忙補完。我沒有去實際trace過jQuery的程式碼，因此不能確定兩者是不是一樣的原因，但是我認為很有可能。至於解決方式，目前還沒找到，如果有的話還請各位先進指教。 (目前是在拿到資料的頁面用PHP再判斷換行/空白的情況) 基本上我認為Firefox / Opera的做法直覺上是比較正確的。 -- Sincerely. --VinTW -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.121.196.135