1

Quería ver si me podrían ayudar con esto.
Tengo un problema en PHP que cuando quiero publicar algo en mi blog no reconoce los saltos de linea como <br>, sino que lo publica todo junto.

¿Hay alguna forma de hacer que cuando presione la tecla enter me añada un <br> al input?

5
  • 2
    Por favor agrega una breve descripción de lo que has buscado/investigado como se sugiere en Cómo preguntar.
    – Rubén
    Commented el 12 may. 2020 a las 21:16
  • 2
    ¿Y porqué en vez de un elemento tipo <input> mejor no usas un elemento tipo <textarea>? Commented el 12 may. 2020 a las 21:16
  • 2
    Deberías usar un <textarea>.
    – VRoxa
    Commented el 12 may. 2020 a las 21:18
  • 2
    con un <textarea> ya detecta los saltos de linea?
    – Jotta ArtZ
    Commented el 12 may. 2020 a las 21:44
  • 2
    quedó así, pero tampoco...
    – Jotta ArtZ
    Commented el 12 may. 2020 a las 21:48

2 respuestas 2

2

En efecto deberías usar un textarea pero respondiendo a tu pregunta si se puede añadir un br a un input de la siguiente manera.

var input = document.getElementsByTagName('INPUT');

for (let i = 0; i < input.length; i++) {
    input[i].onkeypress = function(event) {
        if (event.which == 13) {
            input[i].value = input[i].value + '<br>';
        }
    }
}
<input type="text" placeholder="Texto">

5
  • 1
    Y si uso un textarea? sería lo mismo pero cambiando el input por textarea no?
    – Jotta ArtZ
    Commented el 12 may. 2020 a las 21:51
  • 1
    var textarea = document.getElementsByTagName('textarea'); for (let i = 0; i < textarea.length; i++) { textarea[i].onkeypress = function(event) { if (event.which == 13) { textarea[i].value = textarea[i].value + '<br>'; } } }
    – Jotta ArtZ
    Commented el 12 may. 2020 a las 21:52
  • 1
    o no, perdona la ignorancia
    – Jotta ArtZ
    Commented el 12 may. 2020 a las 21:52
  • 1
    Considera explicar tu aporte
    – user128299
    Commented el 12 may. 2020 a las 21:55
  • el <textarea> por defecto te inserta un <br> cada que das clic en enter pero si lo necesitas insertar textualmente pues si en efecto daría el mismo resultado. Commented el 12 may. 2020 a las 22:03
2

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.