Pourquoi la zone de texte est-elle remplie de mystérieux espaces blancs?


292

J'ai une zone de texte simple sous une forme comme celle-ci:

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

Je continue à obtenir un espace blanc supplémentaire dans cette zone de texte . Lorsque j'y clique, mon curseur est comme au milieu de la zone de texte et non au début? Quelle est l'explication?

Réponses:


485

Examinez attentivement votre code. Il contient déjà trois sauts de ligne et une tonne d'espace blanc auparavant </textarea>. Supprimez-les d'abord afin qu'il n'y ait plus de sauts de ligne entre les balises. Cela pourrait déjà faire l'affaire.


4
@ user79685 vous êtes les bienvenus. Lisez mon nouveau commentaire ci-dessus, je ne vous ridiculisais pas vraiment. Du moins pas de façon méchante :)
Pekka

9
Mmm, je ne suis pas d'accord avec ça. Je suis très attaché au tact et à l'étiquette dans les discussions en ligne, et j'apprécie le ton général très amical de SO. D'un autre côté, il faut développer un peu de skin en se déplaçant sur le net, c'est vrai.
Pekka

2
très agréable. J'étais aussi confronté à ce problème et j'ai essayé toutes les autres astuces, du découpage du texte à l'application de la propriété 'text-index' (en utilisant css) :-D :-D. (comme c'est idiot de ma part). Un problème est survenu car j'ai indenté le code en html: -? ... Merci, votre réponse m'a aussi aidé .. :-)
Gaurav Sharma

3
Utilisez également l' valueattribut au lieu d'ajouter du texte à l'intérieur des balises.
João Cunha

2
Un vieux mais un goodie. Cela m'a aidé aujourd'hui. @Pekka tu es génial!
wordman

73

Eh bien, tout entre <textarea>et </textarea>est utilisé comme valeur par défaut pour votre zone de zone de texte. Il y a un espace dans votre exemple. Essayez d'éliminer tout cela.


4
Merci beaucoup. Je ne savais pas que tout le reste était par défaut. J'ai choisi le gars en haut car il y a répondu en premier bien qu'il me ridiculise. Merci de vous être déplacé.
Afamee

2
C'est simple. Merci beaucoup!
Sergio Belevskij

56

Ouvrez (et fermez!) Vos balises PHP juste après et avant vos textareabalises:

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

4
c'est une façon intelligente de conserver l'indentation dans ces cas. Merci!
Sebastianb

Cela a finalement résolu mon problème. Merci beaucoup Bart
Stephen Kennedy

32

En bref: <textarea>doit être fermé immédiatement sur la même ligne où il a commencé.


Pratique générale: cela ajoutera des sauts de ligne et des espaces utilisés pour l'indentation dans le code.

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

Bonne pratique

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

Résolu mon problème.
S.M_Emamian

C'était aussi la solution parfaite pour moi
Sheldon R.

Résolu mon problème, excellente solution. Merci
Husnain Shabbir

26

Fondamentalement, il devrait être

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

S'il y a des espaces prédéfinis, disons à cause du formatage du code comme ci-dessous

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

Les espaces indiqués par des points continuent à s'ajouter à chaque soumission.


C'est un vieux "truc", parfois même oublié. Nous avons déjà eu des problèmes HTML basés sur cela en remontant à IE6 / 7 .. +1
JonSnow

J'ai sauvé ma journée. Merci!
Reuel Ribeiro

Cela fonctionne très bien, mais c'est vraiment drôle. Une explication sur ce bug bizarre?
Aminu Kano

11

Tout espace entre les balises d'ouverture et de fermeture de la zone de texte sera considéré comme un espace. Donc, pour votre code ci-dessus, la bonne façon sera:

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

7

Une autre solution consiste à utiliser javascript:

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

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

C'est ce que j'ai fait. La suppression des espaces blancs et des sauts de ligne dans le code rend la ligne trop longue.


5

Pour le rendre un peu plus propre, pensez à utiliser l'opérateur ternaire:

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

2
N'utilisez pas de balises courtes, ne suggérez pas aux autres de le faire. Cela aidera les gens à éviter les PITA lors de la mise en place d'une application Web sur un serveur de production avec une configuration différente. Je vous remercie.
Alfabravo

4
J'utilise toujours des balises courtes dans les scénarios de modèles précisément parce que je veux que plus de gens les utilisent, et j'encourage donc la communauté PHP à continuer de les prendre en charge. Cela dit, les balises courtes ne doivent être utilisées QUE dans les scénarios de modèles, JAMAIS dans la logique d'application, et bien évidemment, UNIQUEMENT lorsque le serveur les prend en charge. Connaissez toujours votre environnement de production avant le déploiement. (Naturellement, ce n'est pas l'endroit pour discuter des avantages et des inconvénients des balises courtes, mais vous en avez parlé, c'est ma justification.)
Brian Lacy

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

Déménager ...> vers le bas me convient.


4

J'ai le même problème, et la solution est très simple: ne commencez pas une nouvelle ligne! Bien que certaines des réponses précédentes puissent résoudre le problème, l'idée n'est pas clairement énoncée. La compréhension importante est, pour se débarrasser des espaces non voulus, ne commencez jamais une nouvelle ligne juste après votre balise de début.

La manière suivante est FAUX et laissera beaucoup d'espaces indésirables avant votre contenu texte:

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

La BONNE FAÇON de le faire est:

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

3

Veuillez vous assurer qu'il n'y a pas de saut de ligne ou d'espace après, c'est pour vous assurer qu'il n'y a pas d'espace ou d'onglet, copiez et collez simplement ce code :) Je l'avais corrigé pour vous

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

2

De plus: la balise textarea affiche des espaces pour les nouvelles lignes, tabulations, etc., dans le code multiligne.


2

conserver le code de zone de texte sans espaces blancs supplémentaires à l'intérieur

de plus, si vous voyez des lignes vides supplémentaires, il existe une solution en méta-langage:

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

il imprimera des lignes sans lignes vierges supplémentaires bien sûr, cela dépend si vos lignes se terminant par '\ n', '\ r \ n' ou '' - veuillez adapter


2

La zone de texte montre des espaces mystérieux car il existe un véritable espace dans les balises. <textarea> <php? echo $var; ?> </textarea> après avoir supprimé ces espaces supplémentaires entre les balises, le problème sera résolu comme suit. <textarea><php? echo $var; ?></textarea>


2

Une solution qui a fonctionné pour moi consiste à ajouter le style white-space: normal;à la zone de texte, car il est parfois impossible d'éliminer tous les espaces blancs (par exemple, lorsque vous voulez que votre code respecte vos directives de codage, ce qui nécessite l'ajout d'onglets, d'espaces blancs et de sauts de ligne)

Veuillez noter que la valeur par défaut pour textarea, au moins en chrome est: white-space: pre-wrap;


2

Si vous aimez toujours utiliser l'indentation, faites-le après avoir ouvert la <?phpbalise, comme ceci:

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

2

Je sais qu'il est tard mais peut aider les autres.

utilisez-le lorsque l'indentation du document est requise.

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

meme question


Ou vous pouvez formater votre html correctement. Mais je suis d'accord que cela peut être difficile si vous voulez quelque chose comme du code php à l'intérieur. Je suis donc d'accord avec votre réponse.
Niels Lucas

1

Je suis contre le code HTML mélangé au code PHP.

Essayez cependant ceci:

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

3
Presque ... cela comprend toujours deux nouvelles lignes.
amarillion

Devrait utiliser <textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php et ?></textarea>pour s'assurer qu'il est vraiment pur. Aussi, puis-je vous demander pourquoi vous êtes contre HTML avec PHP?
FluorescentGreen5

1

Définissez simplement votre et votre balise de fermeture sur la même ligne.

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

0

De plus, lorsque vous dites que le curseur est au "milieu" de la zone de texte, cela me fait penser que vous pouvez également avoir un remplissage supplémentaire ou l' alignement du texte: centre défini quelque part dans votre CSS.


0

Assurez-vous d'abord que votre $ siteLink_val ne renvoie pas d'espace blanc comme valeur. L'élément <textarea> par défaut a une valeur vide, donc si la variable que vous faites écho pour une raison quelconque a des espaces, il y a votre problème dès le départ.

Pour rendre le code le plus pur, je suggère que vous puissiez faire quelque chose comme ça, permettant plus de flexibilité plus tard. J'ai créé une fonction qui retourne soit un NULL si la variable n'est pas présente (ce que vous semblez viser dans le message d'origine) et la valeur absolue sinon. Une fois que vous avez vérifié le contenu de votre variable, essayez ceci:

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

Et le code suivant dans votre zone de texte se lirait maintenant:

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

Cela suppose que votre installation PHP est configurée pour les appels de variables abrégés, comme le montrent les balises "<? =?>" Raccourcies. Si vous ne pouvez pas produire de cette façon, n'oubliez pas de faire précéder votre code PHP avec "<? Php" et de fermer avec "?>".

Évitez les sauts de ligne entre les <textarea> car cela peut créer le potentiel de caractères erronés.

Vérifiez également votre CSS pour vous assurer qu'il n'y a pas de règle de remplissage poussant le texte vers l'intérieur.

Vous spécifiez également une valeur de cols et de lignes sur la zone de texte, puis vous définissez une largeur et une hauteur. Ces règles sont contre-productives et entraîneront des visuels incohérents. Restez avec soit définir la taille par le style (je recommande de donner à l'élément une classe) ou les lignes / cols.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.