Fehlende Zeilenumbrüche, wenn Optionen aus einer Auswahlbox (html) über JavaScript Zugriff auf

Ich habe den folgenden Code (gereinigt Code für Klarheit):Fehlende Zeilenumbrüche, wenn Optionen aus einer Auswahlbox (html) über JavaScript Zugriff auf

<!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>

Nun, wenn ich in meinem Auswahlbox auf ein Element klicken I‘ Wenn die Zeilenumbrüche im Textbereich erscheinen sollen, werden sie einfach nicht angezeigt. Ich habe den Debugger eingecheckt, wenn das Auswahlsteuerelement gefüllt wurde, und die Zeilenumbrüche sind definitiv vorhanden (und sie werden auch im Tooltip angezeigt, wenn ich die Eigenschaft "title" mit demselben Text verwende).

Wenn ich den JavaScript-Code debuggen und die tatsächlichen Daten in den Variablendetails (mit charCodeAt) betrachten, dann sehe ich, dass es keine Zeilenumbrüche gibt, dh zwischen "Mein Text" und "hat einen Zeilenumbruch" ist nur ein Leerzeichen (Code 32).

Hat jemand eine Idee, ob das behoben werden kann, oder muss ich mit diesem (meiner Meinung nach) fehlerhaften Verhalten leben? Vielleicht bin ich etwas fehlt ...

Vielen Dank im Voraus

Quelle

2010-11-25 Gorgsenegger

HTML collapses whitespace, einschließlich Zeilenumbrüche.

Sie könnten stattdessen <br> Elemente verwenden, aber sie don't work innerhalb <option> Elemente. Also, ich fürchte, was Sie erreichen möchten, ist nicht möglich mit HTML ...

Quelle

2010-11-25 12:47:22

Danke, zumindest jetzt weiß ich :-) – Gorgsenegger

Da HTML Whitespace, einschließlich Newline-Zeichen, zusammenbricht, müssen Sie ein weiteres Attribut auf der Optionsliste machen, um Ihren Text mit Leerraum zu erhalten und newline-Zeichen

exemple:

<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>

Quelle

2010-11-25 14:08:05 Mouadh

Fehlende Zeilenumbrüche, wenn Optionen aus einer Auswahlbox (html) über JavaScript Zugriff auf

Antwort

Verwandte Themen