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>