Как нажать кнопку по Enter в JS?

Question

Есть такой код,нужно, чтобы вот эта часть, начинающаяся с 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>

Answer 1

Для начала

Есть аттрибут autofocus для интерактивных элементов (кнопка, текстовое поле, выпадающий список...) который при загрузке страницы автоматически фокусирует этот элемент. То есть после открытьи страницы при нажатии Enter он заработает.
Но тут минут в том, что, если взаимодействовать с другими элементами, то фокус пропадет.

Решение

Поэтому снизу вариант для общего случая:

const formData = document.querySelector(`form#data`);

const buttonSender = document.querySelector(`button#sender`);
buttonSender.addEventListener(`click`, (event) => {
  if (formData.checkValidity()) {
    window.alert(`Данные отправлены.`);
  }
});

window.addEventListener(`keydown`, (event) => {
  if (event.code == `Enter`) {
    event.preventDefault();
    buttonSender.click();
  }
});

<form id="data">
  <input type="number" required min="1" max="10" placeholder="Вводите число от 1 до 10 включительно.">
  <button id="sender" type="submit">Отправить данные</button>
</form>

Answer 2

По умолчанию нажатие Enter равносильно клику по первой кнопке с типом submit.

Проблема в приведенном коде заключается в обработчике

field.addEventListener("keypress", (event) => {
    const cyrillicLetters = /^[а-яА-ЯЁё -]+$/i;
    if (cyrillicLetters.test(event.key) === false) {
      event.preventDefault();
    }
});

В котором блокируется стандартное поведение для всех клавиш кроме букв. Достаточно добавить исключение для 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.key != 'Enter') {
          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();

      console.log('Submit');

      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 = "";
      });
    });
  });
})();

<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>

БЛОГ НА HUSL

Как нажать кнопку по Enter в JS?

Ответы (2 шт):

Для начала

Решение