El comportamiento predeterminado de la tecla ENTER es crear un nuevo elemento HTML, y lo podemos evitar con preventDefault()
.
Entonces, puedes agregar un listener y que al hacer keypress
escuche el evento, y lo que hace es capturar el código de la tecla ENTER (que es el número 13
) y le quitamos el evento que trae por defecto:
p.addEventListener("keypress", function (e) {
if (e.keyCode === 13) {
e.preventDefault();
}
});
Ejemplo:
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);
p.addEventListener("keypress", function (e) {
if (e.keyCode === 13) {
e.preventDefault();
}
});
#span {
background: green;
width: 100px;
height: 10px;
position: absolute;
}
<span id="span"></span>