Ist es möglich, Absatzabstände innerhalb eines Textfelds hinzuzufügen?

Question

Ich frage mich nur, ob jemand irgendwelche Möglichkeiten hat, Text mit Absatzabständen Text in einem Textfeld über CSS oder sogar JS hinzuzufügen?

Ich bin mir der Zeilenhöhe bewusst, möchte aber den Eindruck des Abstandes vor/nach den Absätzen innerhalb eines Textfelds hinzufügen, anstatt die Eingabetaste zweimal innerhalb des Textfelds zu drücken, um einen Abstand zwischen den Absätzen zu erhalten.

Ist dies mit einem Textarea allein möglich oder muss ich Rich-Text-Editoren berücksichtigen oder vielleicht sogar einen einfachen Texteditor mit Absatzabständen schreiben? (Ich würde diesen Weg lieber nicht gehen, da ich nur nach dem Absatzabstand bin, nicht alle zusätzlichen Formatierungsoptionen, die mit Text-Editoren geliefert werden)

Answer 1

Nein. Ohne die Eigenschaft line-spacing können Sie keinen Abstand zwischen Absätzen in einer textarea hinzufügen, ohne den Wert des Bereichs zu ändern. Dies können JavaScript- oder CSS-Selektoren nicht tun.

Answer 2

Ja, dies sollte mit JavaScript möglich sein, indem der Wert des Textfelds beim Abhören für keyboard event values, speziell für die Eingabetaste, ersetzt wird.

Sie speichern den Wert in einer Variablen und wenn ein Benutzer auf Enter klickt (sein Ereigniswert ist 13), nimmt er diesen Text und fügt am Ende eine neue Zeile hinzu. Jetzt wird das der Wert, der in der Variablen gespeichert ist, und eine neue Zeile wird hinzugefügt, wenn der Benutzer das nächste Mal auf Enter klickt, und so weiter.

Hier ist eine einfache Implementierung, wenn Sie bereits mit jQuery:

$('#my-text').keypress(function(e) { 
    if(e.which === 13) { 
    var text = $('#my-text').val(); 
    $('#my-text').val(text + '\n'); 
    } 
}); 

e ist die Tastatur-Ereignis als Parameter übergeben in, und wenn das eine Eingabetaste sein geschieht, speichert der Code den Textwert und ersetzt dann den Wert des Textfelds durch diesen Wert plus eine neue Zeile.

Hier ist eine Demo auf codepen: http://codepen.io/denmch/pen/qNyjZE