缺少換行符通過JavaScript

訪問來自一個選擇框（HTML）的選項時，我有以下代碼（爲了清楚起見清洗碼）：缺少換行符通過JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script type="text/javascript"> 
      function updateTextBox() 
      { 
       var lstSource = document.getElementById("lstSource"); 
       var details = lstSource[lstSource.selectedIndex].text; 
       document.getElementById("txtDetails").value = details; 
      } 
     </script> 
    </head> 
    <body> 
     <select id="lstSource" onChange="updateTextBox();"> 
      <option value="26">My Text 

has a line break!</option> 
     </select> 
     <textarea id="txtDetails"></textarea> 
    </body> 

    </html>

現在，當我在選擇框中單擊一個項目我d喜歡在textarea中出現換行符，但是，它們不會顯示出來。我在填充選擇控件時檢查了調試器，並且換行符肯定存在（當我使用具有相同文本的「title」屬性時，它們也顯示在工具提示中）。當我調試JavaScript代碼並查看包含在變量細節中的實際數據（使用charCodeAt）時，我可以看到沒有換行符，即「我的文本」和「有換行符」之間沒有換行符，只是一個空格字符（代碼32）。

有沒有人有一個想法，這是可以修復的，還是我必須忍受這種（在我看來）越野車行爲？也許我失去了一些東西......

在此先感謝

來源

2010-11-25 Gorgsenegger

HTML collapses whitespace，包括換行符。

您可以改爲使用<br>元素，但它們的don't work位於<option>元素內。所以，恐怕你想要達到的是不可能的HTML ...

來源

2010-11-25 12:47:22

謝謝你，至少現在我知道:-) – Gorgsenegger 2010-11-25 13:04:28

由於HTML摺疊空白，包括換行符，你必須在選項列表上另一個屬性，以保留您的文本與空白和換行符

爲例：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script type="text/javascript"> 
      function updateTextBox() 
      { 
       var lstSource = document.getElementById("lstSource"); 
       var details = lstSource[lstSource.selectedIndex].tmpText; 
       document.getElementById("txtDetails").value = details; 
      } 
      function onLoad() 
      { 
       var lstSource = document.getElementById("lstSource"); 
       var text = "Test +\n "; 
       for(var i=0;i<lstSource.options.length;i++) 
       { 
        lstSource.options[i].text = text +i; 
        lstSource.options[i].tmpText = text +i; 
       }     
      } 
     </script> 
    </head> 
    <body onload="onLoad()" > 
     <select id="lstSource" onChange="updateTextBox();"> 
      <option></option> 
      <option></option> 
      <option></option> 
      <option></option> 
      <option></option> 
      <option></option> 
     </select> 
     <textarea id="txtDetails" ></textarea> 
    </body> 

    </html>

來源

2010-11-25 14:08:05 Mouadh

缺少換行符通過JavaScript

回答

相關問題