Вы здесь: Главная » JavaScript » Обработка событий » Отмена действий браузера по умолчанию в JavaScript

Отмена действий браузера по умолчанию в JavaScript

Что такое действия браузера по умолчанию, и зачем их отменять в JavaScript? Как правило, это переходы по ссылкам, отправка формы по клику на кнопке типа submit. Также программным путем можно отменить выделение текста или заблокировать текстовое поле.Разберем несколько типичных вариантов отмены действий браузера по умолчанию в JavaScript. Начнем с ссылок.

Пример 1. Отмена перехода по ссылке.

В случае, когда вам нужно отменить действие по умолчанию, а это для ссылок загрузка страницы по адресу, указанному в атрибуте href, можно использовать метод объекта Event event.preventDefault()  или написать return false. Есть еще один способ, который часто использовался ранее и в меньшей степени сейчас, - записать в атрибут href="javascript:void(0)".

Рассмотрим пример, когда ссылки содержат код JavaScript в качестве атрибута onclick:

В первом случае вы перейдете по ссылке только, если нажмете "Ок" в диалоговом окне confirm(). Во втором и 3-м случае переход не состоится, а в последнем

Пример 2. Отображение модального окна при клике на ссылку

Второй пример, в котором при клике на ссылку нам не нужно никуда переходить - это создание модальных окон. В этом случае ссылка, как правило, выглядит, как якорь, т.е. ведет на html-элемент текущей страницы с определенным  id. Однако такой элемент скрыт изначально, а показать его надо именно по клику на ссылке. Для того чтобы отменить переход, мы воспользуемся методом event.preventDefault().

Разметка, стили и JavaScript-код примера представлены ниже.

Откройте модальное окно сами.

Текст до модального окна. Щелкните на ссылке, чтобы открыть модальное окно.

Открыть модальное окно

Пример 3. Отменяем отправку формы

Для отправки формы есть событие "submit", которое происходит автоматически при нажатии на кнопку типа  "submit" или на клавишу Enter.  Однако перед тем, как форму отправлять на сервер, ее нужно проверить с помощью JavaScript на соответствие определенным правилам. В HTML5 появились новые поля, например email или url, которые имеют встроенную проверку на соответствие определенным символам. Также появился атрибут required, который не дает браузеру отправить форму, если пользователь не ввел в поля с этим атрибутом хотя бы 1 символ.

Проверка полей формы

На рисунке показано, какие предупреждения выводит браузер Google Chrome при заполнении различных по типу полей при нажатии на кнопку с type="submit".

Однако, ввод 1 символа - это недостаточно для заполнения поля с логином, например. Поэтому перед отправкой формы нужно еще дополнительно проверить все поля. Для этого в коде ниже мы используем this.userName.value.length для проверки количества введенные символов для поля с атрибутом name="userName", а для проверки полей с name="userEmail" и name="userSite" будем использовать регулярные выражения, т.к. встроенная проверка браузера на email ищет символ @ и хотя бы 1 символ после него и удовлетворяется этим, а url проверяется на наличие http:// (https://)  и хотя бы одного символа после слэша. Этого недостаточно, поэтому подключаем JavaScript-код и, если проверка не пройдена, т.е. условие в конструкции if() возвращает false, то и для всей функции мы используем return false, отменяя таким образом действие браузера по умолчанию - отправку формы на сервер.

Тестируем пример с отправкой формы:

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *