JavaScript textarea character counter inserting tab

Question

When users on my site go to set their bio for their profile, there is a Javascript character counter to show how many characters they have remaining.

When they go to write a new bio or edit their current one, inside the tags their current bio is echo'd in PHP from the database. Here's the code

<script>
  $(document).ready(function() {
    var text_max = 300;
    $('#textarea_feedback').html(text_max + ' characters remaining');
    $('#textarea').keyup(function() {
      var text_length = $('#textarea').val().length;
      var text_remaining = text_max - text_length;
       $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
  });
</script>
<form action="profile_edit_bio.php" method="post">
  <textarea id="textarea" name="bio" class="input-xxlarge" maxlength="300" placeholder="Update your bio! This should be a short paragraph explaining why you're awesome. (Max characters 300)">
    <?php if(strlen($row[20])!=0) {echo $row[20];}?>
  </textarea>
  <div id="textarea_feedback">
    If you're seeing this message, please <a href="mailto:support@jaycraft.co">contact support</a>
  </div>
  <button type="submit" class="btn btn-info">Update bio</button>
</form>

When they hit the submit button in the form, it saves the bio successfully and everything, but now it shows their bio with the <?php if(strlen($row[20])!=0) {echo $row[20];}?> with loads of tabs around it.

So, for example

Hello, my name is James

Would become

                          Hello, my name is James

It's definitely something wrong with the script, because it doesn't save these spaces/tabs to the database.

Duplicate of http://stackoverflow.com/questions/2202999/why-is-textarea-filled-with-mysterious-white-spaces — Steven Wexler, Apr 26 '13 at 22:04

score 3 · Accepted Answer · answered Apr 26 '13 at 22:01

You're inserting the tabs yourself. ANYTHING between the <textarea> and </textarea> becomes part of the displayed editable text. Your code should be

<textarea>$text_to_insert</textarea>

Note that lack of any whitespace between the tags and the inserted variable/text.Your version is

<textarea>[linebreak]
[tab][tab][tab]$text_to_insert[linebreak]
</textarea>

JavaScript textarea character counter inserting tab

1 Answers1