Изменение входного значения внутри тегов формы при нажатии клавиши ВВОД

Question

Рассмотрим следующий HTML-код:

<form>
    <div>
        <input type ="text" id="myInput"/>
    </div>
</form>

Мне бы хотелось, чтобы, когда пользователь напишет какой-нибудь текст и нажмет клавишу ВВОД, значение ввода изменится на слово «Hello».

Для этого я добавляю следующий код Java Script:

<script>
  var input = document.getElementById("myInput");
  input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
      input.value ="Hello";
    }
});
</script>

К сожалению, это не сработало, поскольку, когда я пишу текст и нажимаю клавишу ВВОД, текст исчез (вместо этогопоказ мира "Привет").

Немного покопавшись в проблеме, я понял, что, если бы я убрал теги "form" из HTML-кода, он бы работал нормально.

У меня два вопроса:

1) Почему это происходит?

2) Как решить эту проблему, не удаляя теги "form"?

Любая помощь будет оценена !!

Answer 1

Функция Form в HTML выглядит для отправки введенных данных. Обычно вы добавляете «действие», которое просто отправляет вашу форму на сервер (т.е. action = "action.php"). Поскольку «действий» нет, вы просто обновляете страницу. Чтобы обойти это, вам нужно будет использовать AJAX и функцию protectDefault (), чтобы остановить отправку формы (обновление страницы).

Answer 2

1. Это происходит потому, что «Enter» пытается отправить форму.

2. Перенос кода в обработчик событий onSubmit может исправить проблему без удаления тега формы.

Я приложил фрагмент. Дайте мне знать, если это то, что вы ожидаете.

<form onSubmit="changeToHello(event)">
    <div>
        <input type ="text" id="myInput"/>
    </div>
</form>
<script>
function changeToHello(event) {
  event.preventDefault();
  var input = document.getElementById("myInput");
  input.value ="Hello";
}
</script>

Answer 3

preventDefault() предотвращает поведение события по умолчанию.

Здесь нет события по умолчанию для события keyup, которое можно предотвратить, поэтому оно не имеет никакого эффекта.

Событие нажатия клавиши также запускается, и его поведение по умолчанию при нажатии клавиши ввода - отправка формы.