4

El problema es que sólo se pasan las letras pero los espacios en blanco no se pasan al div, es decir, si dejo más de un espacio en blanco, solo se pasa como un solo espacio en blanco.

Ejemplo

Supongamos que se ingresa lo siguiente en el textarea: hola mundo.

Pero, en el div solo se pasa de la siguiente manera: hola mundo (no pasa los espacios en blanco que se dejo entre la palabra hola y mundo dentro del textarea).

Código:

let textarea = document.querySelector('#textarea');
let div = document.querySelector('#div');

function funcionX(e) {
  div.innerHTML = e.target.value;
}

textarea.addEventListener('keyup', funcionX, false);
.textarea,
.div {
  border: 1px solid #000;
  width: 300px;
  height: 100px;
}
<textarea class="textarea" id="textarea" placeholder="Textarea"></textarea>
<div class="div" id="div"></div>

2 respuestas 2

3

Por regla general, en HTML todos los espacios en blanco, incluidos los saltos de línea, son reducidos a un sólo espacio en blanco.

Sin embargo para lograr lo que deseas puedes poner ese contenido dentro de una etiqueta <pre>.

let textarea = document.querySelector('#textarea');
let div = document.querySelector('#div');

function funcionX(e) {
  div.innerHTML = "<pre>"+e.target.value+"</pre>";
}

textarea.addEventListener('keyup', funcionX, false);
.textarea,
.div {
  border: 1px solid #000;
  width: 300px;
  height: 100px;
}
<textarea class="textarea" id="textarea" placeholder="Textarea"></textarea>
<div class="div" id="div"></div>


Referencia sobre la etiqueta pre de la W3Schools

0

Para tu requerimiento sin necesidad de cambiar el jquery y complementando la información suministrada por el usuario @LeviArista te comento que existe la propiedad en css denominada white-space la cual según el valor que le asignes tratará a los espacios en blanco en una cadena de diferentes maneras como bien lo explica este enlace white-space css. Whitespace maneja diferentes valores pero de ellos nos conviene utilizar pre.

Entonces para no cambiar tu código de javascript sencillamente agregas está propiedad a tus estilos css. Especificamente en este segmento de código:

.textarea,
.div {
  border: 1px solid #000;
  width: 300px;
  height: 100px;
  white-space:pre <!-- Etiqueta que sirve para el control de espacios en blanco-->
}

De esta forma quedaría el código con el cambio que te comento para lograr justo lo que necesitas:

let textarea = document.querySelector('#textarea');
let div = document.querySelector('#div');

function funcionX(e) {
  div.innerHTML = e.target.value;
}

textarea.addEventListener('keyup', funcionX, false);
.textarea,
.div {
  border: 1px solid #000;
  width: 300px;
  height: 100px;
  white-space:pre
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textarea" id="textarea" placeholder="Textarea"></textarea>
<div class="div" id="div"></div>

Observación: Puede que en algún momento desees eliminar los espacios en blanco en una misma línea y dejar exclusivamente los saltos de línea en una cadena de texto, para ello existe el valor denominado pre-line de la misma propiedad whitespace. He aquí tu código con pre-line incluido:

let textarea = document.querySelector('#textarea');
let div = document.querySelector('#div');

function funcionX(e) {
  div.innerHTML = e.target.value;
}

textarea.addEventListener('keyup', funcionX, false);
.textarea,
.div {
  border: 1px solid #000;
  width: 300px;
  height: 100px;
  white-space:pre-line
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textarea" id="textarea" placeholder="Textarea"></textarea>
<div class="div" id="div"></div>

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.