Textarea default text isn't aligned correctly

I have a textarea below. When I run the code, the text that is suppose to be in the textarea on refresh isn't left aligned and on the top. This is preventing me from using the javascript onfocus and onblur events, because when I compare the string in the box there are extra spaces that are making it different from "Answer this problem..." Is there a way I can make this default text be 开发者_高级运维aligned left and on the top of the textarea without any extra whitespace that I think is being generated from the php somehow.

code:

<textarea id ='box' autocomplete='off'> 
<?php 
    if (!$_SESSION['username']){
      echo "readonly='readonly'";
    }
?>
>
<?php 
    if (!$_SESSION['username']){ 
      echo "Login to answer...";
    } 
    else {
      echo "Answer this problem...";
}
?>
</textarea>

in the header:

#answerbox{
    height: 200px;
    width: 400px;
}

Instead, you can trim your value of the textarea before comparing it with "Answer this problem...".

For instance

if($.trim($('#box').val()) == 'Answer this problem...') { /* do something */ }

Well, you have a lot of white-space between your textarea start tag and your PHP echo content.

<textarea id ='box' autocomplete='off' <?php 
      if (!$_SESSION['username']){
           echo "readonly='readonly'";
      }
  ?> ><?php 
      if (!$_SESSION['username']){ 
          echo "Login to answer...";
      } else {
          echo "Answer this problem...";
      }
    ?></textarea>

All whitespaces in a textarea are actually rendered as content (a bit like within a <pre> tag).

So to avoid this, just start your dynamic content directly after closing the <textarea ...>:

<textarea id ='box' autocomplete='off' 
                <?php 
                    if (!$_SESSION['username']){
                        echo "readonly='readonly'";
                    }
                ?>
            ><?php 
                    if (!$_SESSION['username']){ 
                        echo "Login to answer...";
                    } 
                    else {
                        echo "Answer this problem...";
                    }
                ?></textarea>

Its because you are adding extra space from your new line and tabs. Instead you would want this:

<textarea id ='box' autocomplete='off' 
                    <?php 
                        if (!$_SESSION['username']){
                            echo "readonly='readonly'";
                        }
                    ?>
                ><?php 
                        if (!$_SESSION['username']){ 
                            echo "Login to answer...";
                        } 
                        else {
                            echo "Answer this problem...";
                        }
                    ?>
                </textarea>

Alternatively, I would recommend trimming the values before comparison (removing leading/trailing whitespace). This is easy to do with jQuery's .trim() function.