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

PHP HTML

Jim前端

2020-03-24

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

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

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

第3519篇《为什么textarea充满神秘的白色空间?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

17个回答
LGil 2020.03.24

另外,当您说光标在textarea的“中间”时,我想您也可以在CSS的某个位置定义额外的填充或text-align:center

十三 2020.03.24

我反对HTML代码和PHP代码混合使用。

但是,请尝试以下操作:

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

只需在同一行中定义您和您的关闭标签即可。

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

文本区域显示神秘空间,因为标签中存在真实空间。<textarea> <php? echo $var; ?> </textarea> 删除标记之间的这些多余空格后,将解决此问题,如下所示。 <textarea><php? echo $var; ?></textarea>

Gil 2020.03.24

如果您仍然喜欢使用缩进,请在打开<?php标签后执行缩进,如下所示:

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

对我white-space: normal;有用的一种解决方案是将样式添加到文本区域,因为有时消除所有的空白是不可行的(例如,当您希望代码遵守编码准则时,这需要添加制表符,空白和换行符)

请注意,至少在chrome中,textarea的默认值为: white-space: pre-wrap;

凯伽罗 2020.03.24

我遇到了同样的问题,解决方案非常简单:不要重新开始!尽管先前的某些答案可以解决问题,但是并没有明确说明这一想法。重要的认识是,摆脱无意识的空间,永远只是你的开始标记后开始新的一行。

以下方法是错误的,将在文本内容之前留下很多不需要的空格:

 <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>
泡芙 2020.03.24

此外:textarea标记以多行代码显示换行,制表符等的空间。

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

下移...>对我有用。

凯Gil 2020.03.24

请确保之后没有换行符或空格,这是为了确保没有空格或制表符,只需复制并粘贴以下代码即可:)我已为您修复了该代码

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

为了使它看起来更整洁,请考虑使用三元运算符:

<textarea><?=( $siteLink_val ? $siteLink_val : '' );?></textarea>
小小LEY伽罗 2020.03.24

基本上应该是

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

如果有一些预定义的空格,可以说如下代码格式

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

点表示的空格会在每次提交时不断增加。

蛋蛋 2020.03.24

简而言之: <textarea>应在开始的同一行立即将其关闭。


一般做法:这将添加换行符和空格,以用于代码中的缩进。

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

正确做法

<textarea id="sitelink" name="sitelink"></textarea>
小胖梅 2020.03.24

textarea开头和结尾标记之间的任何空格都将被视为空白。因此,对于您上面的代码,正确的方法将是:

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

好的,介于<textarea>之间的所有内容都 </textarea>用作textarea框的默认值。您的示例中有一些空格。尝试消除所有这些。

泡芙 2020.03.24

在标签之前和之后打开(并关闭!)PHP textarea标签:

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android