Warum ist die Textarea mit mysteriösen Leerzeichen gefüllt?

Question

Ich habe eine einfache Textbereich in einer solchen Form:

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink">
    <?php if($siteLink_val) echo $siteLink_val; ?> 
</textarea>

Ich erhalte ständig zusätzlichen weißen Raum in diesem textarea . Wenn ich mit der Tabulatortaste darauf zugreife, befindet sich mein Cursor in der Mitte des Bildschirms. textarea und nicht von Anfang an? Was ist die Erklärung dafür?

Answer 1

Jedes Leerzeichen zwischen den öffnenden und schließenden Tags eines Textbereichs wird als Leerraum betrachtet. Für Ihren obigen Code ist der korrekte Weg also :

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php if($siteLink_val) echo $siteLink_val; ?></textarea>

Answer 2

Ich habe das gleiche Problem, und die Lösung ist sehr einfach: Fangen Sie keine neue Linie an! Obwohl einige der vorherigen Antworten das Problem lösen können, ist die Idee nicht klar formuliert. Die Um die unbeabsichtigten Leerzeichen zu beseitigen, ist es wichtig, niemals eine neue Zeile direkt nach dem Start-Tag zu beginnen.

Der folgende Weg ist FALSCH und hinterlässt eine Menge unerwünschter Leerzeichen vor Ihrem Textinhalt:

 <textarea>
    text content // start with a new line will leave a lot of unwanted spaces
 </textarea>

Der RICHTIGE WEG ist es, dies zu tun:

 <textarea>text content //put text content right after your start tag, no new line
 </textarea>

Answer 3

Eine andere Möglichkeit wäre die Verwendung von Javascript:

//jquery
$('textarea#someid').html($('textarea#someid').html().trim());

//without jquery
document.getElementById('someid').innerHTML = document.getElementById('someid').innerHTML.trim();

Das habe ich getan. Das Entfernen von Leerzeichen und Zeilenumbrüchen im Code macht die Zeile zu lang.

Answer 4

Ich weiß, es ist spät, aber vielleicht hilft es anderen.

Verwenden Sie diese Option, wenn eine Einrückung des Dokuments erforderlich ist.

$('document').ready(function()
{
    $('textarea').each(function(){
            $(this).val($(this).val().trim());
        }
    );
});

dieselbe Frage

Answer 5

Um das Ganze etwas übersichtlicher zu gestalten, sollten Sie den ternären Operator verwenden:

<textarea><?=( $siteLink_val ? $siteLink_val : '' );?></textarea>