Вызов функции JavaScript при нажатии клавиши ввода в поле ввода

Question

Хотя я могу вызвать функцию Javascript, нажав клавишу ввода. Я вызываю функцию shortIt(), когда пользователь нажимает клавишу ввода, shortIt() берет текст из поля ввода и обращается к API-интерфейсу URL-адреса Google, который возвращает короткий URL-адрес, но сгенерированный ответ отображается всего несколько секунд. Я показываю ответ в div.

Кажется очень странная проблема, код здесь https://s3-ap-southeast-1.amazonaws.com/s3freebucket/URLShortner/url-shortner.html

Но когда я нажимаю на кнопке shortIt на короткий URL-адрес. Он отлично работает, и текст ответа остается в div.

Answer 1

Это потому, что при нажатии клавиши ввода отправляется form. Когда это произойдет, вы заметите перезагрузку страницы. Это поведение по умолчанию и является следствием использования <form>. При отправке формы загружается страница в атрибуте формы action. В этом случае атрибут action<form> не установлен, и поэтому страница, на которой вы находитесь, просто перезагружается, поэтому скрипт перестает работать и перезагружается страница.

Две прямые вперед варианты фиксации этого:

1. (Простейшие) Отобрать тэг формы - он не используется, чтобы представить ничего такого удаления он должен оставить все еще работает

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

   С JQuery:

   $('#myForm').on('submit', function (evt) { evt.preventDefault(); // prevents form submission });

Где myForm это идентификатор вашего тега формы. Вам нужно будет добавить атрибут id в существующий тег формы html: <form id="myForm" class="form-horizontal">