¿Por qué el área de texto está llena de misteriosos espacios en blanco?


292

Tengo un área de texto simple en una forma como esta:

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

Sigo obteniendo espacios en blanco adicionales en este área de texto . Cuando lo presiono, mi cursor está como en el medio del área de texto y no al principio. ¿Cuál es la explicación?

Respuestas:


485

Mira de cerca tu código. En él, ya hay tres saltos de línea, y una tonelada de espacio en blanco antes </textarea>. Quite esos primero para que ya no haya saltos de línea entre las etiquetas. Ya podría hacer el truco.


44
@ user79685 de nada. Lee mi nuevo comentario arriba, realmente no te estaba ridiculizando. Al menos no de una manera mezquina :)
Pekka

99
Mmm, no estoy de acuerdo con eso. Estoy muy interesado en el tacto y la etiqueta en las discusiones en línea, y disfruto el tono general muy amigable en SO. Por otro lado, uno necesita desarrollar un poco de piel cuando se mueve por la red, eso es cierto.
Pekka

2
muy agradable. También estaba enfrentando este problema y probé cualquier otro truco, desde recortar el texto hasta aplicar la propiedad 'text-index' (usando css) :-D :-D. (Que tonto de mi parte). Se produjo un problema porque sangré el código en html: -? ... Gracias, tu respuesta también me ayudó ... :-)
Gaurav Sharma el

3
Además, use el valueatributo en lugar de agregar texto dentro de las etiquetas.
João Cunha

2
Un viejo pero bueno. Esto me ayudó hoy. @Pekka, eres increíble!
wordman

73

Bueno, todo entre <textarea>y </textarea>se usa como el valor predeterminado para su cuadro de área de texto. Hay algunos espacios en blanco en su ejemplo allí. Intenta eliminar todo eso.


44
muchas gracias. No me di cuenta de que todo en el medio es el valor predeterminado. Elegí al chico de arriba porque él respondió primero aunque me ridiculizó. Gracias por sobresalir por la gente.
Afamee

2
Es sencillo. ¡Muchas gracias!
Sergio Belevskij

56

Abra (y cierre) sus etiquetas PHP justo después y antes de sus textareaetiquetas:

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

44
Esta es una forma inteligente de mantener la sangría en estos casos. ¡Gracias!
Sebastianb

Esto finalmente solucionó mi problema. Muchas gracias Bart
Stephen Kennedy

32

En resumen: <textarea>debe cerrarse inmediatamente en la misma línea donde comenzó.


Práctica general: esto agregará saltos de línea y espacios utilizados para la sangría en el código.

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

Práctica correcta

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

Resuelto mi problema
S.M_Emamian

Esta fue la solución perfecta para mí también
Sheldon R.

Resuelto mi problema, gran solución. Gracias
Husnain Shabbir el

26

Básicamente debería ser

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

Si hay algunos espacios predefinidos, digamos debido al formato del código como a continuación

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

Los espacios mostrados por puntos continúan agregando en cada envío.


Este es un viejo "truco", incluso a veces olvidado. Ya teníamos problemas con HTML basados ​​en esto desde IE6 / 7 .. +1
JonSnow

Me salvó el día ¡Gracias!
Reuel Ribeiro

Funciona bien, pero es realmente divertido. ¿Alguna explicación sobre este extraño error?
Aminu Kano

11

Cualquier espacio entre las etiquetas de apertura y cierre de área de texto se considerará como espacio en blanco. Entonces, para su código anterior, la forma correcta será:

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

7

Otra solución sería usar javascript:

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

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

Esto es lo que hice. La eliminación de espacios en blanco y saltos de línea en el código hace que la línea sea demasiado larga.


5

Para que se vea un poco más limpio, considere usar el operador ternario:

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

2
No use etiquetas cortas, no sugiera a otros que lo hagan. Esto ayudará a las personas a evitar PITA cuando coloquen alguna aplicación web en un servidor de producción con una configuración diferente. Gracias.
Alfabravo

44
Siempre uso etiquetas cortas en escenarios de plantillas precisamente porque quiero que más personas las usen y, por lo tanto, aliento a la comunidad de PHP a continuar apoyándolos. Dicho esto, las etiquetas cortas SOLO se deben usar en escenarios de plantillas, NUNCA en la lógica de la aplicación y, obviamente, SOLO cuando el servidor las admite. Siempre conozca su entorno de producción antes de implementar. (Naturalmente, este no es el lugar para discutir los pros y los contras de las etiquetas cortas, pero lo mencionaste, así que esa es mi justificación.)
Brian Lacy,

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

Mover ...> hacia abajo me funciona.


4

Tengo el mismo problema, y ​​la solución es muy simple: ¡no comience una nueva línea! Aunque algunas de las respuestas anteriores pueden resolver el problema, la idea no se establece claramente. El entendimiento importante es que, para deshacerse de los espacios no intencionados, nunca comience una nueva línea justo después de su etiqueta de inicio.

La siguiente forma es INCORRECTA y dejará muchos espacios no deseados antes de su contenido de texto:

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

La MANERA CORRECTA de hacerlo es:

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

3

Asegúrese de que no haya ningún salto de línea o espacio después, es para asegurarse de que no haya espacios en blanco o tabulación, solo copie y pegue este código :) Lo arreglé por usted

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

2

Además: la etiqueta textarea muestra espacios para nuevas líneas, pestañas, etc., en código multilínea.


2

mantenga el código de área de texto sin espacios en blanco adicionales dentro

Además, si ve líneas en blanco adicionales, hay una solución en el metalenguaje:

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

imprimirá líneas sin líneas en blanco adicionales, por supuesto, depende de si las líneas que terminan en '\ n', '\ r \ n' o '' - adapte


2

El área de texto muestra espacios misteriosos porque existe un espacio real en las etiquetas. <textarea> <php? echo $var; ?> </textarea> después de eliminar estos espacios adicionales entre las etiquetas, se resolverá el problema de la siguiente manera. <textarea><php? echo $var; ?></textarea>


2

Una solución que me ha funcionado es agregar el estilo white-space: normal;al área de texto porque a veces no es factible eliminar todo el espacio en blanco (por ejemplo, cuando desea que su código cumpla con sus pautas de codificación, lo que requiere agregar pestañas, espacios en blanco y saltos de línea)

Tenga en cuenta que el valor predeterminado para textarea, al menos en Chrome, es: white-space: pre-wrap;


2

Si todavía le gusta usar sangría, hágalo después de abrir la <?phpetiqueta, así:

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

2

Sé que es tarde, pero puede ayudar a otros.

use esto cuando se requiera sangrado de documento.

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

la misma pregunta


O puede formatear su html correctamente. Pero sí estoy de acuerdo en que puede ser algo difícil si quieres algo como código php dentro de él. Así que estoy de acuerdo con tu respuesta.
Niels Lucas

1

Estoy en contra del código HTML mezclado con código PHP.

Sin embargo intente esto:

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

3
Casi ... eso todavía incluye dos nuevas líneas.
amarillion

Debe usar <textarea style="width:350px; height:80px;" cols="42" rows="5" name="sitelink"><?php y ?></textarea>para asegurarse de que sea verdaderamente puro. Además, ¿puedo preguntar por qué estás en contra de HTML con PHP?
FluorescentGreen5

1

Simplemente defina su y su etiqueta de cierre en la misma línea.

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

0

Además, cuando dice que el cursor está en el "medio" del área de texto, me hace pensar que también podría tener relleno adicional o alinear texto: centro definido en algún lugar de su CSS.


0

Primero, asegúrese de que su $ siteLink_val no devuelva espacios en blanco como valor. El elemento <textarea> por defecto tiene un valor vacío, por lo que si la variable que está haciendo eco por alguna razón tiene espacios, ahí está su problema de inmediato.

Para hacer que el código sea el más limpio, le sugiero que haga algo como esto, permitiendo más flexibilidad más adelante. Hice una función que devuelve un NULL si la variable no está presente (a lo que parece apuntar en la publicación original) y el valor absoluto de lo contrario. Una vez que se haya asegurado del contenido de su variable, intente esto:

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

     else {
          return "";
     }
}

$output_siteLink_val = build_siteLink_val();

Y el siguiente código en su área de texto ahora se leería:

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

Esto supone que su instalación de PHP está configurada para llamadas variables cortas, como se ve en las etiquetas abreviadas "<? =?>". Si no puede generar esta salida, recuerde introducir el código PHP con "<? Php" y cerrar con "?>".

Evite los saltos de línea entre <textarea> porque puede crear el potencial de caracteres erróneos.

Además, verifique su CSS para asegurarse de que no haya una regla de relleno que empuje el texto hacia adentro.

Además, puede especificar un valor de columnas y filas en el área de texto y luego diseñar un ancho y alto. Estas reglas son contraproducentes y generarán imágenes inconsistentes. Siga definiendo el tamaño a través del estilo (recomiendo darle una clase al elemento) o las filas / columnas.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.