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

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2023

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

Ответы

▲ 0Принят

По умолчанию нажатие 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>