javascript - bootstrap - textarea value

Copia de textarea a div, preservando saltos de línea.

Question

Tengo un <textarea> y un <div> (con un <p> dentro). Al ingresar texto en el área, <p> se actualiza con el contenido en keyUp.

¿Hay alguna forma de preservar los saltos de línea (nueva línea) del área de texto y hacer que funcionen como saltos de línea en el div / p?

Reemplazando la doble "nueva línea" con </p><p> , ¿es eso posible también? Esto está cerca de lo que manejaría un wysiwyg, pero no quiero eso porque es un proyecto muy pequeño.

Esto es lo que tengo hasta ahora.

$(".box textarea").keyup(function () {
  var value = $(this).val();  
  $(''.box p'').text(value);
});

Answer 1

Aquí está la solución jQuery pura más simple y segura:

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $(''.box p'').text(value).css(''white-space'', ''pre-wrap'');
});

Por supuesto, si puede agregar .box p { white-space: pre-wrap } a sus estilos de CSS estático, entonces no necesita inyectarlo con jQuery.

(También tenga en cuenta que white-space: pre-wrap también hace que se conserven múltiples espacios consecutivos, y no se colapsen en un solo espacio. Si no desea eso, pero aún desea conservar los saltos de línea, use white-space: pre-line lugar.)

PD. Nunca debe pasar una entrada de usuario sin escaparse a .html() (como, por ejemplo, la respuesta actualmente aceptada), ya que al hacerlo se producirá una salida alterada si la entrada contiene metacaracteres HTML como & o < , y también puede abrirlo para la inyección de HTML y Los ataques de scripts entre sitios (XSS) si alguna vez un atacante malicioso puede influir en la entrada.

Si insiste absolutamente en no usar la propiedad de white-space en white-space CSS de ninguna forma, primero tendrá que escapar de los metacaracteres HTML en la entrada antes de agregarle las etiquetas. Probablemente, la forma más sencilla y segura de hacerlo es dejar que el navegador maneje el escape por usted, por ejemplo, así:

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $(''.box div.output'').text(value).html(function (index, html) {
    return ''<p>'' + html.replace(/[^/S/n]+/n/g, ''/n'').replace(//n/n+/g, ''</p><p>'').replace(//n/g, ''<br>'') + ''</p>'';
  });
});

Esto primero copiará el texto de entrada en el elemento de destino usando .text() (que automáticamente se escapa de HTML) y luego modifica el código HTML resultante para eliminar el espacio en blanco de las líneas, para colapsar múltiples saltos de línea consecutivos en saltos de párrafo, y finalmente para Reemplace las líneas de alimentación individuales con etiquetas de texto.

(Tenga en cuenta que, para permitir varios párrafos en la salida, el elemento de destino debería ser realmente un elemento <div> , no un elemento <p> . Anidar un elemento <p> dentro de otro no es un código HTML válido, y es posible que no produzca resultados coherentes resultados en diferentes navegadores)

Answer 2

Probablemente desee agregar la regla CSS white-space: pre o white-space: pre-wrap .box p a .box p . Esto mostrará espacios en blanco como están.

Answer 3

Simplemente puede hacer esto:

$(''.box textarea'').keyup(function() {
    var value = $(this).val().replace(//n/g, ''<br/>'');
    $(".box p").html(value);
});

Esto reemplazará todos los saltos de línea /n en su elemento de área de textarea y los reemplazará a todos con la etiqueta html <br/> , para que pueda conservar los saltos de línea en su área de texto dentro del elemento de etiqueta <p> también.

Demo simple aquí:

$(''.box textarea'').keyup(function() {
  $(".box p").html(this.value.replace(//n/g, ''<br/>''));
});

textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <textarea></textarea>
  <br/>
  <p></p>
</div>

Si puede realizar cambios en sus archivos css, también puede probar las siguientes soluciones como se sugiere en @Explosion Pills . Aunque tendrá que seguir usando el código jquery aquí para agregar el textarea ingresado en el texto keyup a la etiqueta p en el evento keyup como:

$(''.box textarea'').keyup(function() {
  $(".box p").html(this.value);  // replace is not needed here
});

textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
  white-space: pre; // <--- This is the important part
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <textarea></textarea>
  <br/>
  <p></p>
</div>

Answer 4

Use string.replace("/n", "<br/>") para reemplazar los saltos de línea en su área de texto por una nueva línea en su página.

JavaScript:

<script type="text/javascript">
function ta()
{
taValue = document.getElementById("ta").value;
taValue = taValue.replace("/n", "<br/>");
document.getElementById("tatext").innerHTML = taValue;
}
</script>

HTML:

<textarea id="ta" onkeyup="ta()"></textarea>
<div id="tatext"></div>