web-dev-qa-db-ja.com

なぜtextareaは神秘的な空白で満たされているのですか？

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

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

このtextareaに余分な空白を入れ続けます。タブに移動すると、カーソルはtextareaの真ん中にあり、最初ではありませんか？説明は何ですか？

phphtmlformstextarea
240
Afamee

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

414
Pekka 웃

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

60
amarillion

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

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

基本的には

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

事前に定義されたスペースがある場合、次のようなコードの書式設定のために言うことができます

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

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

24
beebek

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

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

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

正しい練習

<textarea id="sitelink" name="sitelink"></textarea>
21
pega wega

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

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

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

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

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

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

7
Milad.Nozari

少し見やすくするために、三項演算子の使用を検討してください。

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

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

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

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

同じ質問

3
Er Jagdish Patel

私のために働いた1つのソリューションは、スタイルwhite-space: normal;をテキストエリアに追加することです）

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

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

移動...>下に私のために動作します。

2
User707

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

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

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

2
Ashfaq Jan

それでもインデントを使用する場合は、次のように<?phpタグを開いてから実行してください。

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

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

1
Gal Margalit

私はPHPコードと混合したHTMLコードに反対です。

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

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

内部に空白を追加せずにテキストエリアコードを保持する

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

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

もちろん、空白行を追加せずに行を印刷します。行末が「\ n」、「\ r\n」、または「」の場合は異なります-適応してください

1
Sławomir Lenart

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

コードを完全にクリーンにするために、このようなことを行うことをお勧めします。これにより、後で柔軟性を高めることができます。変数が存在しない場合はNULLを返す関数を作成しました（元の投稿で目的としているように見える）、そうでない場合は絶対値を返します。変数の内容を確認したら、これを試してください：

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

そして、テキストエリアの次のコードは次のようになります。

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

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

<textarea>の間の改行は、誤った文字が作成される可能性があるため、避けてください。

また、CSSをチェックして、テキストを内側にプッシュするパディングルールがないことを確認します。

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

0
dmanexe

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

 <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>
0
William Hou

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

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

また、カーソルがtextareaの「中央」にあると言うと、CSSのどこかに余分なパディングまたはtext-align：centerが定義されている可能性があると思います。

0
Brian Lacy