Un elemento de tipo input
no "guarda" los saltos de línea, esta concebido para entradas sencillas: texto no demasiado largo y en una línea. Para introducir un texto largo, con saltos de línea en un formulario, se emplearía un textarea
.
Propuesta de solución: insertar saltos de línea HTML en textarea al pulsar Enter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea id="test"></textarea>
<script>
const element = document.getElementById('test');
element.addEventListener(
'keydown',
(event) => {
if (event.key === 'Enter') {
element.value = element.value + '<br>';
}
}
);
</script>
</body>
</html>
Explicación: asocio un evento de tecla al textarea, cuando detecta el evento y la tecla pulsada en Enter modifica el contenido del textarea añadiendo <br>
al final del contenido.
Propuesta de solución: añadir el HTML en el servidor
Cuando el formulario se envía al servidor, tienes que recoger y tratar su contenido. Si no vas a introducir más HTML en el formulario, puedes "limpiar" el texto y seguidamente añadir los saltos de línea HTML, si bien esto puedes hacerlo antes de guardarlo o de pintarlo.
Si recibes el texto con los saltos de línea HTML incorporados una función interesante es strip_tags()
que limpia tags HTML del texto pero permite conservar los seleccionados (lista blanca), ejemplo:
$str = 'Hola<br><hr>mundo';
$str = strip_tags($str, '<br>'); // Salida: 'Hola<br>mundo'
echo $str;
Para transformar saltos de línea del texto plano a HTML con PHP:
<?php
$str = trim($_POST['texto']);
$str = preg_replace(PHP_EOL, '<br>', $str);
// Salida posible: 'Hola<br>mundo'
o bien:
<?php
$str = trim($_POST['texto']);
$str = nl2br($str);
// Salida posible: 'Hola<br />mundo'
La función nl2br()
tiene esta finalidad específica, por defecto añade tags XHTML, es decir <br />
en lugar de HTML <br>
. Añade false
como segundo parámetro para obtener estos últimos.
https://www.php.net/manual/es/function.strip-tags.php
https://www.php.net/manual/es/function.nl2br.php
<input>
mejor no usas un elemento tipo<textarea>
?<textarea>
.