Por que a área de texto é preenchida com espaços em branco misteriosos?


292

Eu tenho uma área de texto simples em um formulário como este:

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

Continuo recebendo espaço em branco extra nesta área de texto . Quando abro o cursor, fica no meio da área de texto e não no começo? Qual a explicação?

Respostas:


485

Observe atentamente o seu código. Nele, já existem três quebras de linha e uma tonelada de espaço em branco antes </textarea>. Remova os primeiros para que não haja mais quebras de linha entre as tags. Já pode fazer o truque.


4
@ user79685 de nada. Leia meu novo comentário acima, eu realmente não estava ridicularizando você. Pelo menos não de uma maneira média :)
Pekka

9
Mmm, eu não concordo com isso. Sou muito a favor do tato e da etiqueta nas discussões on-line e gosto do tom geral muito amigável do SO. Por outro lado, é preciso desenvolver um pouco de pele ao se movimentar na rede, isso é verdade.
Pekka

2
muito agradável. Eu também estava enfrentando esse problema e tentei todos os outros truques, desde aparar o texto até aplicar a propriedade 'text-index' (usando css) :-D :-D. (que bobo da minha parte). Problema ocorreu porque eu recuado o código html: -? ... Obrigado, sua resposta me ajudou muito .. :-)
Gaurav Sharma

3
Além disso, use o valueatributo em vez de adicionar texto dentro das tags.
João Cunha

2
Um oldie, mas um goodie. Isso me ajudou hoje. @Pekka você é demais!
wordman

73

Bem, tudo entre <textarea>e </textarea>é usado como o valor padrão para sua caixa de área de texto. Há algum espaço em branco no seu exemplo lá. Tente eliminar tudo isso.


4
Muito obrigado. Eu não percebi que tudo no meio é o padrão. Eu escolhi o cara por cima, porque ele respondeu primeiro, apesar de me ridicularizar. Obrigado por apoiar as pessoas.
Afamee

2
É simples. Muito obrigado!
Sergio Belevskij

56

Abra (e feche!) Suas tags PHP logo após e antes, suas textareatags:

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

4
é uma maneira inteligente de manter o recuo nesses casos. Obrigado!
Sebastianb

Isso finalmente corrigiu meu problema. Muito obrigado Bart
Stephen Kennedy

32

Em resumo: <textarea>deve ser fechado imediatamente na mesma linha em que foi iniciado.


Prática geral: isso adicionará quebras de linha e espaços usados ​​para indentação no código.

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

Prática correta

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

Resolveu o meu problema.
S.M_Emamian

Esta foi a solução perfeita para mim também
Sheldon R.

Resolvido meu problema, ótima solução. Obrigado
Husnain Shabbir 11/11/19

26

Basicamente, deve ser

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

Se houver alguns espaços predefinidos, digamos, devido à formatação do código, como abaixo

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

Os espaços mostrados por pontos continuam aumentando em cada envio.


Este é um velho "truque", às vezes esquecido. Nós já tivemos problemas HTML com base nesta volta vai IE6 / 7 .. +1
JonSnow

Salvou o meu dia. Obrigado!
Reuel Ribeiro

Funciona muito bem, mas é realmente engraçado. Alguma explicação sobre esse bug estranho?
Aminu Kano

11

Qualquer espaço entre as tags de abertura e fechamento da área de texto será considerado como espaço em branco. Portanto, para o código acima, a maneira correta será:

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

7

Outra solução seria usar javascript:

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

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

Foi o que eu fiz. A remoção de espaços em branco e quebras de linha no código torna a linha muito longa.


5

Para torná-lo um pouco mais limpo, considere usar o operador ternário:

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

2
Não use tags curtas, não sugira que outras pessoas o façam. Isso ajudará as pessoas a evitar PITAs ao colocar alguns webapp em um servidor de produção com uma configuração diferente. Obrigado.
Alfabravo

4
Eu sempre uso tags curtas em cenários de modelo precisamente porque quero que mais pessoas as usem e, assim, incentivo a comunidade PHP a continuar a apoiá-los. Dito isso, as tags curtas SOMENTE devem ser usadas em cenários de modelagem, NUNCA na lógica do aplicativo e, obviamente, SOMENTE quando o servidor as suportar. Sempre conheça seu ambiente de produção antes da implantação. (Naturalmente, este não é o lugar para discutir os prós e contras de tags curtas, mas você trouxe para cima, de modo que é a minha justificação.)
Brian Lacy

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

Descer ... funciona para mim.


4

Eu tenho o mesmo problema e a solução é muito simples: não comece uma nova linha! Embora algumas das respostas anteriores possam resolver o problema, a ideia não é declarada claramente. O entendimento importante é que, para se livrar dos espaços não intencionais, nunca inicie uma nova linha logo após a tag de início.

A maneira a seguir está ERRADA e deixará muitos espaços indesejados antes do conteúdo do texto:

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

A maneira certa de fazer isso é:

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

3

Por favor, verifique se não há quebra de linha ou espaço depois, é para garantir que não haja espaço em branco ou guia, basta copiar e colar este código :) Eu o corrigi

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

2

Além disso: a tag textarea mostra espaços para novas linhas, guias, etc., no código de múltiplas linhas.


2

mantenha o código da área de texto sem espaços em branco adicionais dentro

além disso, se você vir linhas em branco extras, há uma solução na meta linguagem:

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

ele imprimirá linhas sem linhas em branco adicionais, é claro que depende se suas linhas terminam com '\ n', '\ r \ n' ou '' - adapte


2

A área de texto mostra espaços misteriosos porque existe um espaço real nas tags. <textarea> <php? echo $var; ?> </textarea> depois de remover esses espaços extras entre as tags, o problema será resolvido da seguinte maneira. <textarea><php? echo $var; ?></textarea>


2

Uma solução que funcionou para mim é adicionar o estilo white-space: normal;à área de texto, porque às vezes não é possível eliminar todo o espaço em branco (por exemplo, quando você deseja que seu código cumpra suas diretrizes de codificação, que exige a adição de guias, espaços em branco e quebras de linha)

Observe que o padrão para a área de texto, pelo menos no chrome, é: white-space: pre-wrap;


2

Se você ainda gosta de usar o recuo, faça-o após abrir a <?phptag, da seguinte maneira:

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

2

Eu sei que é tarde, mas pode ajudar os outros.

use isso quando for necessário o recuo do documento.

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

mesma questão


Ou você pode formatar seu html corretamente. Mas eu concordo que pode ser algo difícil se você quiser algo como código php dentro dele. Então, eu concordo com sua resposta.
Niels Lucas

1

Sou contra o código HTML misturado com o código PHP.

No entanto, tente o seguinte:

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

3
Quase ... isso ainda inclui duas novas linhas.
amarillion

Deve usar <textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php e ?></textarea>garantir que seja verdadeiramente puro. Além disso, posso perguntar por que você é contra HTML com PHP?
FluorescentGreen5

1

Apenas defina sua marca e sua marca na mesma linha.

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

0

Além disso, quando você diz que o cursor está no "meio" da área de texto , me faz pensar que você também pode ter preenchimento extra ou alinhamento de texto: centro definido em algum lugar no seu CSS.


0

Primeiro, verifique se o seu $ siteLink_val não está retornando espaço em branco como valor. O elemento <textarea>, por padrão, possui um valor vazio; portanto, se a variável que você está ecoando por algum motivo tiver espaços, o problema será imediato.

Para tornar o código o mais limpo possível, sugiro que você faça algo assim, permitindo mais flexibilidade posteriormente. Eu criei uma função que retorna um NULL se a variável não estiver presente (o que você parece estar buscando na postagem original) e o valor absoluto caso contrário. Depois de verificar o conteúdo da sua variável, tente o seguinte:

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

E o seguinte código em sua área de texto agora seria:

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

Isso pressupõe que sua instalação do PHP esteja configurada para chamadas variáveis ​​abreviadas, como visto nas tags "<? =?>" Reduzidas. Se você não pode imprimir dessa maneira, lembre-se de preceder seu código PHP com "<? Php" e fechar com "?>".

Evite quebras de linha entre <textarea> 's, pois isso pode criar o potencial de caracteres incorretos.

Além disso, verifique seu CSS para garantir que não haja uma regra de preenchimento pressionando o texto para dentro.

Além disso, você especifica um valor de colunas e linhas na área de texto e, em seguida, denomina uma largura e altura. Essas regras são contraproducentes e resultam em visuais inconsistentes. Continue definindo o tamanho através do estilo (eu recomendo dar uma classe ao elemento) ou as linhas / colunas.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.