Perché textarea è piena di misteriosi spazi bianchi?


292

Ho una semplice area di testo in una forma come questa:

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

Continuo a ricevere lo spazio vuoto in più in questo textarea . Quando ho scheda in esso il mio cursore è come nel mezzo del textarea e non in principio? Qual è la spiegazione?

Risposte:


485

Guarda attentamente il tuo codice. In esso, ci sono già tre interruzioni di riga e una tonnellata di spazio bianco prima </textarea>. Rimuovi prima quelli in modo che non ci siano più interruzioni di riga tra i tag. Potrebbe già fare il trucco.


4
@ user79685 sei il benvenuto. Leggi il mio nuovo commento sopra, non ti stavo davvero ridicolizzando. Almeno non in modo cattivo :)
Pekka,

9
Mmm, non sono d'accordo. Mi piace molto il tatto e l'etichetta nelle discussioni online e mi piace il tono generale molto amichevole su SO. D'altra parte, è necessario sviluppare un po 'di pelle quando ci si sposta in rete, è vero.
Pekka,

2
molto bella. Stavo affrontando anche questo problema e ho provato ogni altro trucco dal taglio del testo all'applicazione della proprietà 'text-index' (usando css) MrGreen MrGreen. (Che sciocco sono). Si è verificato un problema perché ho indentato il codice in html: -? ... Grazie, anche la tua risposta mi ha aiutato .. :-)
Gaurav Sharma,

3
Inoltre, usa l' valueattributo invece di aggiungere del testo all'interno dei tag.
João Cunha,

2
Un vecchio ma un buono. Questo mi ha aiutato oggi. @Pekka sei fantastica!
wordman

73

Bene, tutto tra <textarea>e </textarea>viene usato come valore predefinito per la tua casella di testo. C'è un po 'di spazio nel tuo esempio lì. Cerca di eliminare tutto ciò.


4
molte grazie. Non mi rendevo conto che tutto nel mezzo è l'impostazione predefinita. Ho scelto il ragazzo migliore perché ha risposto prima, anche se mi ha ridicolizzato. Grazie per essere venuto fuori per la gente.
Afamee,

2
È semplice. Molte grazie!
Sergio Belevskij,

56

Apri (e chiudi!) I tuoi tag PHP subito dopo e prima i tuoi textareatag:

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

4
questo è un modo intelligente per mantenere il rientro in questi casi. Grazie!
Sebastianb,

Questo finalmente risolto il mio problema. Grazie mille Bart
Stephen Kennedy,

32

In breve: <textarea>dovrebbe essere chiuso immediatamente sulla stessa linea da cui è iniziato.


Pratica generale: aggiungerà interruzioni di riga e spazi utilizzati per il rientro nel codice.

<textarea id="sitelink" name="sitelink">
</textarea>

Pratica corretta

<textarea id="sitelink" name="sitelink"></textarea>

Risolto il mio problema
S.M_Emian

Questa è stata la soluzione perfetta anche per me
Sheldon R.

Risolto il mio problema, ottima soluzione. Grazie
Husnain Shabbir l'

26

Fondamentalmente dovrebbe essere

<textarea>something here with no spaces in the begining</textarea>

Se ci sono alcuni spazi predefiniti, diciamo a causa della formattazione del codice come di seguito

<textarea>.......
....some_variable
</textarea>

Gli spazi indicati dai punti continuano ad aggiungersi ad ogni invio.


Questo è un vecchio "trucco", a volte dimenticato. Abbiamo già avuto problemi di HTML basati su questo risalendo a IE6 / 7 .. +1
JonSnow

Mi ha salvato la giornata. Grazie!
Reuel Ribeiro,

Funziona bene, ma è davvero divertente. Qualche spiegazione su questo strano bug?
Aminu Kano,

11

Qualsiasi spazio tra i tag di apertura e chiusura di textarea verrà considerato come uno spazio bianco. Quindi per il codice sopra riportato, il modo corretto sarà:

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

7

Un altro modo per aggirare sarebbe usare javascript:

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

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

Questo è quello che ho fatto. La rimozione di spazi bianchi e interruzioni di riga nel codice rende la riga troppo lunga.


5

Per renderlo un po 'più pulito, considera l'utilizzo dell'operatore ternario:

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

2
Non usare tag brevi, non suggerire ad altri di farlo. Questo aiuterà le persone a evitare i PITA quando inseriscono alcune webapp in un server di produzione con una configurazione diversa. Grazie.
Alfabravo,

4
Uso sempre tag brevi in ​​scenari di templatura proprio perché voglio che più persone li usino, e quindi incoraggio la comunità PHP a continuare a supportarli. Detto questo, i tag brevi dovrebbero essere utilizzati SOLO in scenari di template, MAI nella logica dell'applicazione e, ovviamente, SOLO quando il server li supporta. Conoscere sempre l'ambiente di produzione prima della distribuzione. (Naturalmente, questo non è il posto giusto per discutere i pro e i contro dei tag brevi, ma tu l'hai tirato su, quindi questa è la mia giustificazione.)
Brian Lacy,

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

Lo spostamento ...> giù funziona per me.


4

Ho avuto lo stesso problema e la soluzione è molto semplice: non iniziare una nuova linea! Sebbene alcune delle risposte precedenti possano risolvere il problema, l'idea non è stata dichiarata chiaramente. L' importante comprensione è, per sbarazzarsi degli spazi non intenzionali, non iniziare mai una nuova riga subito dopo il tag di inizio.

Il seguente modo è SBAGLIATO e lascerà molti spazi indesiderati prima del contenuto del testo:

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

Il modo giusto per farlo è:

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

3

Assicurati che non ci siano interruzioni di riga o spazi dopo, è per assicurarti che non ci siano spazi bianchi o tab, basta copiare e incollare questo codice :) L'ho riparato per te

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

2

Inoltre: il tag textarea mostra gli spazi per nuove righe, tab, ecc., In codice multilinea.


2

mantenere il codice textarea senza spazi bianchi aggiuntivi all'interno

inoltre se vedi delle righe vuote in più c'è una soluzione nel meta linguaggio:

<textarea>
for line in lines:
echo line.replace('\n','\r')
endfor
</textarea>

stamperà le linee senza ulteriori righe vuote, ovviamente dipende se le tue linee terminano con '\ n', '\ r \ n' o '' - si prega di adattare


2

L'area di testo mostra spazi misteriosi perché esiste uno spazio reale nei tag. <textarea> <php? echo $var; ?> </textarea> dopo aver rimosso questi spazi extra tra i tag risolverà il problema, come segue. <textarea><php? echo $var; ?></textarea>


2

Una soluzione che ha funzionato per me è l'aggiunta dello stile white-space: normal;all'area di testo perché a volte non è possibile eliminare tutto lo spazio bianco (ad esempio quando si desidera che il codice rispetti le linee guida di codifica che richiedono l'aggiunta di schede, spazi bianchi e interruzioni di riga)

Nota che l'impostazione predefinita per textarea, almeno in Chrome è: white-space: pre-wrap;


2

Se desideri comunque utilizzare il rientro, fallo dopo aver aperto il <?phptag, in questo modo:

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

2

So che è tardi ma può aiutare gli altri.

usalo quando è richiesto il rientro del documento.

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

stessa domanda


Oppure potresti formattare correttamente il tuo html. Ma sono d'accordo che può essere difficile qualcosa se vuoi qualcosa come il codice php al suo interno. Quindi sono d'accordo con la tua risposta.
Niels Lucas,

1

Sono contro il codice HTML mescolato con il codice PHP.

Tuttavia prova questo:

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

3
Quasi ... questo include ancora due nuove righe.
amarillion

Dovrebbe usare <textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php e ?></textarea>per assicurarsi che sia veramente puro. Inoltre, posso chiederti perché sei contrario all'HTML con PHP?
FluorescentGreen5

1

Basta definire il tuo e il tuo tag di chiusura nella stessa riga.

<textarea class="form-control"
          id="newText"
          rows="6"
          placeholder="Your placeholder here..."
          required
          name="newText"></textarea>

0

Inoltre, quando dici che il cursore si trova nel "mezzo" dell'area di testo, mi viene da pensare che potresti anche avere un padding extra o text-align: center definito da qualche parte nel tuo CSS.


0

Assicurati innanzitutto che $ siteLink_val non restituisca spazi bianchi come valore. L'elemento <textarea> di default ha un valore vuoto, quindi se la variabile che stai echeggiando per qualche motivo ha degli spazi, c'è il tuo problema fin dall'inizio.

Per rendere il codice assolutamente più pulito, suggerirei che potresti fare qualcosa del genere, consentendo in seguito una maggiore flessibilità. Ho creato una funzione che restituisce un valore NULL se la variabile non è presente (ciò che sembra puntare nel post originale) e il valore assoluto altrimenti. Dopo esserti accertato del contenuto della tua variabile, prova questo:

function build_siteLink_val() {
     if ( $siteLink_val ) {
          return $siteLink_val;
     }

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

E il seguente codice nella tua textarea ora dovrebbe leggere:

<textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?=$output_siteLink_val?></textarea>

Ciò presuppone che l'installazione di PHP sia configurata per le chiamate variabili short-hand, come si vede nei tag "<? =?>" Abbreviati. Se non puoi emettere in questo modo, ricorda di prefigurare il tuo codice PHP con "<? Php" e chiudere con "?>".

Evita le interruzioni di riga tra <textarea> perché può creare il potenziale di caratteri errati.

Inoltre, controlla il tuo CSS per assicurarti che non ci sia una regola di riempimento che spinga il testo verso l'interno.

Inoltre, si specifica un valore di colonne e righe nell'area di testo e quindi si modella una larghezza e un'altezza. Queste regole sono controproducenti e si tradurranno in elementi visivi incoerenti. Attenersi alla definizione delle dimensioni tramite lo stile (consiglio di assegnare all'elemento una classe) o alle righe / colonne.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.