为什么textarea充满神秘的白色空间？

我有一个像这样的形式的简单文本区域：

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

我在此文本区域中不断获得额外的空白。当我将其切换到它时，光标就像在文本区域的中间，而不是在开头？有什么解释？

仔细查看您的代码。其中已经有三个换行符，并且之前有大量空白</textarea>。首先删除这些标记，以使标记之间不再出现换行符。它可能已经成功了。

好了，<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;有用的一种解决方案是将样式添加到文本区域，因为有时消除所有空白是不可行的（例如，当您希望您的代码遵守编码准则时，这需要添加制表符，空白和换行符）

请注意，至少在chrome中，textarea的默认值为： 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());
        }
    );
});

同样的问题

我反对HTML代码和PHP代码混在一起。

但是，请尝试以下操作：

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

另外，当您说光标在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以确保没有填充规则将文本向内推。

另外，您可以在文本区域上指定cols和rows值，然后设置宽度和高度的样式。这些规则适得其反，并会导致视觉效果不一致。坚持通过样式定义大小（我建议给元素一个类）或行/列。