Why is textarea filled with mysterious white spaces?

Question

I have a simple text area in a form like this:

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

I keep getting extra white space in this textarea. When I tab into it my cursor is like in the middle of the textarea and not in the beginning? What is the explanation?

As firmly defined in all upvoted answers, tldr; is this behavior is in the desktop client browser window. It depends how the DOM interpreter handles it but any excess spaces are whitespaces/comments - but they are still is included in HTML renderer. Thus the newlines/whitespaces, combine `` with no whitespace to the next DOM element defined (`php ... `?><`/textarea>) — mschr, Jan 12 '22 at 17:42
Do not insert any spaces or newlines inside the in the code editor. @Model.ContactName If you insert spaces or enters inside, like the next sample pseudocode, you will get misterious spaces inside your textarea in the web page: enter space mytextInside space enter space — user2648846, Apr 20 '23 at 13:53

score 631 · Accepted Answer · edited Jun 26 '23 at 07:37

631

Look closely at your code. In it, there are already three line breaks, and a ton of white space before </textarea>. Remove those first so that there are no line breaks in between the tags any more. It might already do the trick.

Note that if($siteLink_val) condition is superfluous in this case and can be safely removed.

What is more important, all HTML output must be obligatory HTML-encoded. Hence your code could be like this

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

edited Jun 26 '23 at 07:37

Your Common Sense

156,878
40
214
345

answered Feb 04 '10 at 20:37

Pekka

442,112
142
972
1,088

6

@user79685 you're welcome. Read my new comment above, I wasn't really ridiculing you. At least not in a mean way :) – Pekka Feb 04 '10 at 20:52
11

Mmm, I don't agree with that. I'm very much for tact and etiquette in online discussions, and I enjoy the overall very friendly tone on SO. On the other hand, one needs to develop a bit of a skin when moving about on the net, that's true. – Pekka Feb 04 '10 at 20:58
2

very nice. I was facing this problem too and tried every other trick from trimming the text to applying the 'text-index' property (using css) :-D :-D. (how silly of me). Problem occured because I indented the code in html :-?... Thanks, your answer helped me too.. :-) – Gaurav Sharma Nov 26 '10 at 10:49
3

Also, use the `value` attribute instead of adding text inside the tags. – João Cunha Nov 25 '13 at 10:33
2

An oldie but a goodie. This helped me out today. @Pekka you are awesome! – wordman Feb 07 '14 at 06:12
1

@JoãoCunha, there is no `value` attribute on `textarea` element. The above solution worked like a charm. – Bruno Gasparotto Sep 03 '15 at 19:04
I've been caught to. This is fun to see so many people falling for this simple mistake. – Billybobbonnet Nov 27 '15 at 11:15
1

I got caught out by this in Coldfusion. I can't believe whitespace in the code translates into whitespaces in the textarea! – volume one Nov 29 '16 at 12:24
Couple years later, but João Cunha, that doesn't work. Didn't for me at least. – Matheus Mar 14 '17 at 12:19
1

Also make sure the is not in the next line. it should be like <?php value ?>. I forgot about the close tag and roamed in the browser for a long time. – Pravinraj Venkatachalam Jul 11 '17 at 05:34
Helped me out today, I really appreciate that. – anthonyCam Jun 24 '18 at 14:32
Thank you for this, I never knew about this behavior until today. – Ryan Wilson Sep 14 '18 at 13:21
Had the same problem and got solved by the above answer. Kudos !! – Brnovich Nov 12 '18 at 18:19
I cannot believe that this was the solution to the problem – Jun 30 '20 at 11:28
Coming here in 2021, whitespace from bad formatting on my part was the trick! – Adam Specker Jan 13 '21 at 22:35
Yes it works but why Laravel does not trim the white space??? – Čamo Feb 01 '21 at 11:11
wow... really can't see the wood for the trees. – BegYourPardon Oct 20 '21 at 16:47
It is very different situation :D But it works, thanks dude – kadir Feb 19 '22 at 17:44
Dude after hours you saved my head from getting smashed to the wall... Jk now for real dude thanks! – Ikram Khizer Apr 23 '22 at 12:02
1

I think this issue will plague developers for the foreseeable future.... Thanks! – griv Dec 19 '22 at 23:35

score 110 · Answer 2 · edited Jun 26 '23 at 06:49

110

Well, everything between <textarea> and </textarea> is used as the default value for your textarea box. There is some whitespace in your example there. Try to eliminate all of that.

Make sure that the following is the case:

<textarea><?php 

    *more php code here...*

?></textarea>

edited Jun 26 '23 at 06:49

Louis

3
2

answered Feb 04 '10 at 20:36

amarillion

24,487
15
68
80

4

thanks a lot. I didnt realize that everything in between is the default. I chose the guy on top cause he answered it first though he ridiculed me. Thanks for sticking out for folks. – Afamee Feb 04 '10 at 20:51
2

It's simple. Thanks a lot! – Sergio Belevskij May 03 '15 at 17:59

score 75 · Answer 3 · answered Feb 04 '10 at 20:37

75

Open (and close!) your PHP tags right after, and before, your textarea tags:

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

answered Feb 04 '10 at 20:37

Bart Kiers

166,582
36
299
288

5

this a clever way to keep the indentation in these cases. Thanks! – Sebastianb Mar 28 '17 at 18:29
This finally fixed my issue. Thanks a lot Bart – Stephen Kennedy Mar 05 '19 at 10:25
brilliant. This is very useful in cases where you want to keep a consistent indentation across your blade file. – Yeasir Arafat Majumder May 19 '21 at 06:20

score 53 · Answer 4 · answered Dec 05 '15 at 07:02

53

In short: <textarea> should be closed immediately on the same line where it started.

General Practice: this will add-up line-breaks and spaces used for indentation in the code.

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

Correct Practice

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

answered Dec 05 '15 at 07:02

pega wega

809
8
13

Solved my problem. – S.M_Emamian Jun 29 '17 at 17:43
This was the perfect solution for me as well – Sheldon R. Apr 04 '18 at 15:10
Solved my problem, great solution. Thanks – Husnain Shabbir Oct 11 '19 at 12:54
Works like charm! – MK. Sep 06 '21 at 16:36

score 30 · Answer 5 · answered Mar 28 '14 at 07:23

30

Basically it should be

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

If there are some predefined spaces lets say due to code formatting like below

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

The spaces shown by dots keeps on adding on each submit.

answered Mar 28 '14 at 07:23

beebek

1,893
5
29
33

This is an old "trick", even sometimes forgotten. We already had HTML issues based on this going back to IE6/7 .. +1 – JonSnow Dec 03 '14 at 08:37
Saved my day. Thanks! – Reuel Ribeiro May 31 '17 at 19:25
It works just fine, but it's really funny. Any explanation on this weird bug? – Aminu Kano Apr 24 '19 at 13:54
how do you annotate placeholders, value, methods etc in this setup? I need a place holder, but my tag needs a space between – BHANG Nov 20 '20 at 00:04

score 12 · Answer 6 · answered Dec 02 '16 at 11:56

Any space in between textarea openning and closing tags will be consider as whitespace. So for your above code, the correct way will be :

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

William Hou · Answer 7 · 2019-07-15T06:17:06.907

10

I got the same problem, and the solution is very simple: don't start a new line! Although some of the previous answers can solve the problem, the idea is not stated clearly. The important understanding is, to get rid of the unintended spaces, never start a new line just after your start tag.

The following way is WRONG and will leave a lot of unwanted spaces before your text content:

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

The RIGHT WAY to do it is:

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

edited Jul 15 '19 at 06:17

answered May 20 '19 at 16:22

William Hou

1,251
14
17

Ok but why Laravel does not trim that white space? – Čamo Feb 01 '21 at 11:12
1

To Camo: The spaces are trimmed on some platforms but not on others. On some platforms, the old versions may not trim the spaces, while the new ones may do. Even within some of the same versions, it depends. When you have the problem, however, the above stated is one of the ways to solve it. – William Hou Feb 02 '21 at 14:02
I dont understand it. I have Laravel 8 and it is the same. I think trim() should be platform independent. – Čamo Feb 02 '21 at 17:58
1

Sorry Camo. It was over a year and a half ago, and I forgot the context of the problem. Anyway, if you have the problem, the above stated is one of the ways to solve it. – William Hou Feb 02 '21 at 18:38
@WilliamHou, yes whatever u suggested is worked for me, TQ – Prabha Jan 24 '22 at 07:05

score 9 · Answer 8 · answered Oct 31 '13 at 10:29

Another work around would be to use javascript:

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

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

This is what I did. Removing white-spaces and line-breaks in the code makes the line too long.

Er Jagdish Patel · Answer 9 · 2022-11-12T08:35:21.433

7

I know its late but may help others.

use this in when document indentation is required.

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

same question

edited Nov 12 '22 at 08:35

answered Jun 27 '17 at 06:49

Er Jagdish Patel

173
2
8

Or you could format your html correctly. But I do agree that can be hard something if you want something like php code inside of it. So I do agree with your answer. – Niels Lucas Jan 02 '19 at 08:56

score 5 · Answer 10 · answered Feb 04 '10 at 20:43

5

To make it look a bit cleaner, consider using the ternary operator:

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

answered Feb 04 '10 at 20:43

Brian Lacy

18,785
10
55
73

2

Don't use short tags, don't suggest others to do so. This will help people avoid PITAs when putting some webapp in a production server with a different config. Thank you. – Alfabravo Feb 04 '10 at 20:53
5

I always use short tags in templating scenarios precisely because I want more people to use them, and thus encourage the PHP community to continue to support them. That said, short tags should ONLY be used in templating scenarios, NEVER in application logic, and quite obviously, ONLY when the server supports them. Always know your production environment before deploying. (Naturally, this is not the place to discuss the pros and cons of short tags, but you brought it up, so that's my justification.) – Brian Lacy Feb 05 '10 at 16:48

score 5 · Answer 11 · answered Feb 28 '21 at 21:43

5

simply put all that on one-line

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

answered Feb 28 '21 at 21:43

Waad Mawlood

727
6
10

score 4 · Answer 12 · answered Nov 21 '16 at 18:36

4

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

Moving ...> down works for me.

answered Nov 21 '16 at 18:36

User707

182
2
8

score 4 · Answer 13 · answered May 24 '19 at 14:49

4

Just define your and your close tag in same line.

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

answered May 24 '19 at 14:49

Enderson Menezes

459
3
9

score 4 · Answer 14 · answered Mar 07 '12 at 13:47

Please make sure there is no linebreak or space after , it's to make sure there is no whitespace or tab, just copy and paste this code :) I had fix it for you

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

score 2 · Answer 15 · answered Jan 23 '13 at 11:21

2

Furthermore: the textarea tag shows spaces for new lines, tabs, etc, in multiline code.

answered Jan 23 '13 at 11:21

Gal Margalit

5,525
6
52
56

score 2 · Answer 16 · answered Jan 29 '13 at 09:48

keep textarea code with no additional white spaces inside

moreover if you see extra blank lines there is solution in meta language:

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

it will print lines without additional blank lines of course it depends if your lines ending with '\n', '\r\n' or '' - please adapt

score 2 · Answer 17 · answered Jul 29 '13 at 06:06

The text area shows mysterious spaces because there is a real space exists in the tags. <textarea> <php? echo $var; ?> </textarea> after removing these extra spaces between the tags will solve the issue , as following. <textarea><php? echo $var; ?></textarea>

score 2 · Answer 18 · answered Oct 16 '14 at 05:00

One solution that has worked for me is adding the style white-space: normal; to the textarea because at times it is not feasible to eliminate all the whitespace (for example when you want your code to abide to your coding guidelines which requires adding tabs, whitespaces and line breaks)

Please note that the default for textarea, at least in chrome is: white-space: pre-wrap;

score 2 · Answer 19 · answered Jun 14 '16 at 07:57

If you still like to use indentation, do it after opening the <?php tag, like so:

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

score 1 · Answer 20 · edited Mar 10 '10 at 19:03

1

I'm against HTML code mixed with PHP code.

However try this:

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

edited Mar 10 '10 at 19:03

Peter Mortensen

30,738
21
105
131

answered Feb 04 '10 at 20:50

streetparade

32,000
37
101
123

3

Almost... that still includes two newlines. – amarillion Feb 04 '10 at 20:54
Should use `<?php ` and `?>` to ensure that it is truly pure. Also, may I ask why you're against HTML with PHP? – FluorescentGreen5 May 20 '17 at 11:10

score 0 · Answer 21 · answered Feb 04 '10 at 20:46

0

Also, when you say that the cursor is in the "middle" of the textarea, it makes me think you could also either have extra padding or text-align: center defined somewhere in your CSS.

answered Feb 04 '10 at 20:46

Brian Lacy

18,785
10
55
73

dmanexe · Answer 22 · 2010-02-04T21:00:06.123

Make sure first that your $siteLink_val isn't returning white space as a value. The <textarea> element by default has an empty value so if the variable you're echo'ing for some reason has spaces, there's your problem right off the bat.

To make the code the absolute cleanest, I would suggest you could do something like this, allowing for some more flexibility later. I've made a function that returns either a NULL if the variable isn't present (what you seem to be aiming for in the original post) and the absolute value otherwise. Once you've made sure of your variable's contents, try this:

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

And the following code in your textarea would now read:

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

This is assuming your PHP install is configured for short-hand variable calls, as seen in the shortened "<?=?>" tags. If you cannot output this way, remember to preface your PHP code with "<?php" and close with "?>".

Avoid line breaks between <textarea>'s because it can create the potential of erroneous characters.

Also, check your CSS to make sure there isn't a padding rule pushing text inward.

Also, you specify a cols and rows value on the textarea, and then style a width and height. These rules are counter-productive, and will result in inconsistent visuals. Stick with either defining the size through style (I recommend giving the element a class) or the rows/cols.

score 0 · Answer 23 · answered Jul 22 '21 at 13:53

In addition to doing this:

Before:

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

after:

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

I too added the method trim() of PHP:

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

Why is textarea filled with mysterious white spaces?

23 Answers23

Linked

Related