1

tnego un problema que no entiendo muy bien. Lo que tengo es un campo de texto que debe modificarse y mientras lo hace la línea verde ajusta su width a este texto:

let span = document.getElementById("span");
let p = document.createElement('p');
document.body.appendChild(p);
p.textContent="Text";
p.style.position="absolute";
p.style.margin="0";
p.contentEditable="true";
function input(){
let s = getComputedStyle(p);
span.style.width= parseFloat(s.width) + "px";
console.log("Divs salidos de la nada:" + document.getElementsByTagName("div").length);
}
p.addEventListener("focus", function(e){e.target.style.outline="none"});
p.addEventListener("input", input);
 #span{
        background: green;
        width: 100px;
        height: 10px;
        position: absolute;
    }
<span id="span"></span>

El problema es que se crea un div si le doy a enter, se que aqui se crea cada vez que escribo una letra pero en mi navegador solo lo crea cuando le doy a enter.

¿Porque se crea dicho div? Y se les ocurre alguna forma para hacer que no ocurra esto. Lo necesito todo en un mismo p aunque le haya dado enter. Muchisimas gracias!

1
  • 1
    No estás notando algo... El mismo problema se da al borrar un caracter, o escribiendo caracter por caracter ;) Así que lo del enter no es el verdadero problema.
    – padaleiana
    Commented el 26 abr. 2023 a las 19:22

1 respuesta 1

3

El comportamiento predeterminado de la tecla ENTER es crear un nuevo elemento HTML (que es justamente ese div), y lo podemos evitar con preventDefault().


Entonces, puedes agregar un listener, le indico que al hacer keydown escuche el evento, y lo que hace el evento es capturar a la tecla ENTER y le quitamos el evento que trae por defecto. Luego de esto, lo podemos concatenar con <br> para hacer los saltos de línea:

p.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    e.preventDefault();
    p.innerHTML = p.innerHTML + "<br><br>"; // le agrego 2 para notar más el cambio.
  }
});

Veamos lo que sucede.

Comentaré la línea de código que remueve el outline del p, para poder ver bien cómo se hace los saltos de línea:

let span = document.getElementById("span");
let p = document.createElement('p');
document.body.appendChild(p);
p.innerHTML="Text";
p.style.position="absolute";
p.style.margin="0";
p.contentEditable="true";

function input(){
  let s = getComputedStyle(p);
  span.style.width= parseFloat(s.width) + "px";
}

// quito el focus para ver los saltos de línea que ocurre.
// p.addEventListener("focus", function(e){e.target.style.outline="none"});
p.addEventListener("input", input);

p.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    e.preventDefault();
    p.innerHTML = p.innerHTML + "<br><br>";
  }
});
#span {
  background: green;
  width: 100px;
  height: 10px;
  position: absolute;
}

p {
  font-size: 20px;
}
<span id="span"></span>

Como verás, los saltos de línea están ocurriendo, los div ya no se están generando, pero el cursor (para escribir) se va al inicio. Es un comportamiento muy extraño (que me ha sido de difícil entender), pero pienso que tiene que ver algo con el keydown.


Entonces, hay que encontrar la manera de que el cursor para escribir se posicione al final, ya que el final es ese salto de línea que hicimos, y ahí es donde nos queremos ubicar para continuar escribiendo.

Una forma de hacerlo sería:

  • Seleccionar el texto.
  • Posicionar el cursor de escritura al final.
  • Remover la selección del texto.

Y esto es posible hacerlo, utilizando al objeto range.


Lógica de selección:

El objeto Range es utilizado para representar una selección en el documento HTML, que es justamente lo que necesitamos.

Entonces, inicializamos al rango y otra variable para obtener todas las selecciones en el documento:

const rango = document.createRange(); // Inicializamos un rango.
const seleccionar = window.getSelection(); // Inicializo la selección.

Luego seleccionamos a todo el p:

rango.selectNodeContents(p);

Y ubico la posición del cursor al final:

rango.collapse(false);

Ahora remuevo todas las selecciones del documento:

seleccionar.removeAllRanges();

Y por último agrego el rango al elemento p:

seleccionar.addRange(rango);

Y con esto ya lo tendrías, simplemente seleccionamos, ubicamos el cursor al final (al salto de línea echo) y quitamos la selección.


El código final vendría a ser el siguiente (doy una mejor explicación en los comentarios):

let span = document.getElementById("span");
let p = document.createElement('p');
document.body.appendChild(p);
p.innerHTML="Text";
p.style.position="absolute";
p.style.margin="0";
p.contentEditable="true";

function input(){
  let s = getComputedStyle(p);
  span.style.width= parseFloat(s.width) + "px";
}

// quito el focus para ver los saltos de línea que ocurre.
// p.addEventListener("focus", function(e){e.target.style.outline="none"});
p.addEventListener("input", input);

p.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    e.preventDefault();
    p.innerHTML = p.innerHTML + "<br><br>";

    const rango = document.createRange(); // Inicializamos un rango.
    const seleccionar = window.getSelection(); // Inicializo la selección.
    
    // Indicamos qué va a hacer el rango.
    rango.selectNodeContents(p); // Primero, le digo que seleccione todo el texto.
    rango.collapse(false); // Luego, posiciono el cursor de escribir al final, ya que "false" es al final y "true" es al inicio.
    
    // Hasta aquí, el texto está seleccionado y el cursor está al final del todo.
    
    // Entonces, remuevo todas las selecciones que hay en el documento (removiendo también la selección del "p").
    seleccionar.removeAllRanges();
    // Y por último, ejecuto el rango con las indicaciones que le dí (el de selecciona al "p" y ubicando el cursor al final).
    seleccionar.addRange(rango);
  }
});
#span {
  background: green;
  width: 100px;
  height: 10px;
  position: absolute;
}

p {
  font-size: 20px;
}
<span id="span"></span>

14
  • 1
    El problema es que se crea un div si le doy a enter -> ese no es el problema? o será que estoy entendiendo mal... Y al clicarse no veo que genere un div... Commented el 26 abr. 2023 a las 16:46
  • 3
    Solo quiere que no se creen los divs. En definitiva tienes que crear <br> solamente. Por cierto, keyCode está obsoleto
    – Mateo
    Commented el 26 abr. 2023 a las 16:48
  • 1
    El detalle es que está solución no funciona para móvil.
    – Mateo
    Commented el 26 abr. 2023 a las 16:56
  • 1
    @Raffaelo pruebalo tu mismo. Yo creo que es porque no tiene un teclado físico y no produce el evento "keypress". textContent solo muestra texto, no el HTML. Usa innerHTML. Consulta la documentación
    – Mateo
    Commented el 26 abr. 2023 a las 16:58
  • 3
    @Raffaelo eso son tonterías. ¿Qué se supone que te van a hackear? Solo el aspecto del sitio. En el mundo real no puedes detener a nadie de hacerlo, solo dificultarlo.
    – Mateo
    Commented el 26 abr. 2023 a las 17:02

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.