Как нажать кнопку по Enter в JS?
Есть такой код,нужно, чтобы вот эта часть, начинающаяся с form.addEventListener("submit", (element) =>
работала и по нажатию на enter. На данный момент по нажатию на Enter получилось вывести сообщение, но как заставить работать форму, не пойму.
(function() {
document.addEventListener("DOMContentLoaded", (_) => {
const form = document.querySelector(".form");
const container = document.querySelector(".container-md");
const inputs = form.querySelectorAll("input");
inputs.forEach((field) => {
field.addEventListener("keypress", (event) => {
const cyrillicLetters = /^[а-яА-ЯЁё -]+$/i;
if (cyrillicLetters.test(event.key) === false) {
event.preventDefault();
}
});
field.addEventListener("blur", (event) => {
let correctedValue = field.value.trim();
while (correctedValue.indexOf("-") === 0) {
correctedValue = correctedValue.slice(1);
}
while (correctedValue.substring(correctedValue.length - 1) === "-") {
correctedValue = correctedValue.slice(0, -1);
}
correctedValue = correctedValue.replace(/-+/g, "-");
correctedValue = correctedValue.replace(/\s+/g, " ");
correctedValue = correctedValue.replace(/[a-z0-9]/gi, "");
correctedValue =
correctedValue.substring(0, 1).toUpperCase() +
correctedValue.substring(1, correctedValue.length).toLowerCase();
field.value = correctedValue;
});
});
form.addEventListener("submit", (element) => {
element.preventDefault();
let surname = form.querySelector('input[name="surname"]').value,
name = form.querySelector('input[name="name"]').value,
lastname = form.querySelector('input[name="lastname"]').value,
fio = document.createElement("p");
fio.textContent = `${surname} ${name} ${lastname}`;
container.append(fio);
document.querySelectorAll(".form input").forEach((field) => {
field.value = "";
});
});
form.addEventListener("keyup", function(event) {
if (event.keyCode == 13) {
// event.preventDefault();
console.log("вы нажали enter");
}
});
});
})();
<div class="container-md">
<form class="form">
<div>
<input type="text" name="surname">
</div>
<div>
<input type="text" name="name">
</div>
<div>
<input type="text" name="lastname">
</div>
<button id="button" type="submit" class="btn">Отправить</button>
</form>
</div>
Источник: Stack Overflow на русском