Textarea的默認文本沒有正確對齊

Question

我在下面有一個textarea。當我運行代碼時，假設在刷新的textarea中的文本不會左對齊，並且位於頂部。這是阻止我使用javascript onfocus和onblur事件，因爲當我比較框中的字符串有額外的空間，使它不同於「回答這個問題...」有沒有一種方法，我可以使這個默認文本左對齊並在textarea的頂部沒有任何額外的空白，我認爲是從PHP生成的。

代碼：

<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> 

在頭

：

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

Answer 1

好了，你有你的textarea開始標籤和你的PHP echo內容之間有很多的空白。 （有點像<預>標籤內）

<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> 

Answer 2

在一個文本的所有空格實際上呈現爲內容。

因此，爲了避免這種情況，只需直接關閉後啓動動態內容< 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> 

Answer 3

它，因爲你添加自己的新生產線和標籤額外的空間。相反，你會想這樣：

<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> 

另外，我會建議在比較前（刪除前導/尾隨空白）修剪值。這很容易做到jQuery的.trim()函數。

Answer 4

相反，您可以在將它與「回答此問題...」進行比較之前修剪textarea的值。

例如

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