なぜtextareaは神秘的な空白で埋められているのですか？

次のような形式の単純なテキスト領域があります。

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

このtextareaに余分な空白が増え続けます。タブを押すと、カーソルはテキストエリアの中央にあり、最初ではありませんか？説明は何ですか？

コードをよく見てください。その中には、すでに3つの改行があり、前に大量の空白があり</textarea>ます。最初にそれらを削除して、タグの間に改行がないようにします。それはすでにトリックをしているかもしれません。

まあ、間のすべてのもの <textarea>とは、</textarea>あなたのテキストエリアボックスのデフォルト値として使用されます。あなたの例にはいくつかの空白があります。そのすべてを排除するようにしてください。

タグの直後と前に、PHPタグを開きます（閉じます！）textarea。

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

つまり <textarea>、開始したのと同じ行ですぐに閉じる必要があります。

一般的な方法：これは、コードのインデントに使用される改行とスペースを追加します。

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

正しい練習

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

基本的には

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

いくつかの定義済みのスペースがある場合は、以下のようなコードの書式設定により、

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

ドットで示されるスペースは、送信ごとに追加され続けます。

textareaの開始タグと終了タグの間のスペースは、空白と見なされます。したがって、上記のコードの場合、正しい方法は次のとおりです。

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

別の回避策は、javascriptを使用することです。

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

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

これは私がやったことです。コード内の空白と改行を削除すると、行が長くなります。

少し見栄えを良くするには、三項演算子の使用を検討してください。

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

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

移動...>下への移動は私にとってはうまくいきます。

同じ問題が発生しましたが、解決策は非常に簡単です。新しい行を開始しないでください！以前の回答のいくつかは問題を解決できますが、アイデアは明確に述べられていません。重要な理解はちょうどあなたの開始タグの後に新しい行を開始し、意図しないスペースを取り除くために、ことはありません。

次の方法は間違っており、テキストコンテンツの前に多くの不要なスペースが残ります。

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

それを行う正しい方法は次のとおりです。

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

後に改行やスペースがないことを確認してください。空白やタブがないことを確認してください。このコードをコピーして貼り付けてください:)私はあなたのために修正しました

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

さらに、textareaタグは、複数行のコードで新しい行、タブなどのスペースを示します。

内部に空白を追加せずにtextareaコードを保持する

さらに、余分な空白行が表示される場合は、メタ言語での解決策があります。

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

もちろん、追加の空白行なしで行を印刷します。行が '\ n'、 '\ r \ n'または ''で終わるかどうかによって異なります-適応してください

タグには実空間が存在するため、テキスト領域は不思議な空間を示しています。<textarea> <php? echo $var; ?> </textarea> タグ間のこれらの余分なスペースを削除すると、次のように問題が解決します。 <textarea><php? echo $var; ?></textarea>

white-space: normal;時々すべての空白を削除することが現実的でないため、私にとってうまくいった解決策の1つは、textareaにスタイルを追加することです（たとえば、タブ、空白、改行を追加する必要があるコーディングガイドラインにコードを準拠させたい場合など）。

textareaのデフォルトは、少なくともchromeであることに注意してください： white-space: pre-wrap;

インデントを引き続き使用する場合は、<?phpタグを開いた後に次のようにしてください。

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

私は遅いことを知っていますが、他の人を助けるかもしれません。

ドキュメントのインデントが必要な場合に使用します。

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

同じ質問

PHPコードと混合したHTMLコードに反対しています。

しかし、これを試してください：

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

あなたとあなたの閉じるタグを同じ行で定義するだけです。

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

また、カーソルがテキストエリアの「中央」にあると言うと、CSSのどこかに追加のパディングまたはtext-align：centerを定義することもできると思います。

最初に、$ siteLink_valが値として空白を返さないことを確認してください。<textarea>要素のデフォルト値は空なので、なんらかの理由でエコーしている変数にスペースがある場合、問題はすぐに発生します。

コードを最もクリーンなものにするために、私はあなたがこのようなことをすることをお勧めします。それにより、後でいくつかの柔軟性を可能にします。変数が存在しない場合はNULL（元の投稿で目指していたように見える）と、それ以外の場合は絶対値のいずれかを返す関数を作成しました。変数の内容を確認したら、次のことを試してください。

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

そして、あなたのtextareaの次のコードは今読むでしょう：

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

これは、短縮された「<？=？>」タグに見られるように、PHPインストールが省略形の変数呼び出し用に構成されていることを前提としています。この方法で出力できない場合は、PHPコードの前に必ず「<？php」を付け、最後に「？>」を付けてください。

<textarea>の間に改行を入れないでください。誤った文字になる可能性があります。

また、CSSをチェックして、テキストを内側に押し込むパディングルールがないことを確認してください。

また、textareaでcolsとrowsの値を指定してから、幅と高さのスタイルを設定します。これらのルールは逆効果であり、結果として一貫性のないビジュアルになります。サイズ（スタイルには要素を指定することをお勧めします）または行/列でサイズを定義します。