Hinzufügen eines Newline-Zeichens und Display-Eingabe aus einem Textfeld

Question

Ich habe einen Text in einer Form. Ich habe diesen Code

$('textarea').keypress(function (event) { 
     if (event.which == 13) { 
      event.preventDefault(); 
      var s = $(this).val(); 
      $(this).val(s + "<br />"); 
     } 
    }); 

verwendet, damit Benutzer die nächste Zeile mit der Eingabetaste aufrufen können. Ich habe versucht, beide
und \ n In dem Formular kann der Benutzer zu einer neuen Zeile wechseln. Wenn die Eingabe jedoch auf einer Seite angezeigt wird, wird die neue Zeile nicht angezeigt, und ein Text nach der neuen Zeile wird nicht angezeigt. Es ist jedoch immer noch dort - wenn Sie gehen, um das Formular zu bearbeiten, zeigt es noch den Text eingegeben, nachdem Sie auf Enter geklickt haben. Ich fügte hinzu

in die CSS für Textfelder in meiner CSS-Datei versuchen, das Problem zu lösen. Es hat jedoch immer noch nicht funktioniert. Irgendwelche Vorschläge/Eingabe, wie man das löst?

Answer 1

Sie möchten das <br/>-Tag nicht einfügen, während sie eingeben. Sie wollen wirklich nichts mit ihrem Text tun, während sie tippen. Wenn Sie ihre Zeilenumbrüche beibehalten möchten, können Sie sie in <br/> Tags konvertieren, bevor Sie sie in ein Element injizieren.

$('#text').keyup(function(event) { 
 
    var text = $("#text").val(); 
 
    text = text.replace(/(?:\r\n|\r|\n)/g, '<br />'); 
 
    $("#result").html(text); 
 
});

textarea { 
 
    min-width: 200px; 
 
    min-height: 200px; 
 
    float: left; 
 
} 
 

 
#result { 
 
    float: left; 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
    margin-left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="text" placeholder="Type in here"></textarea> 
 
<div id="result"></div>