Как использовать userAgent для обнаружения мобильного устройства

Валидация input с помощью html

Для этой задачи воспользуемся атрибутом pattern. При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или title).

Демонстрация.

После ввода нажмите enter, чтобы посмотреть как будет вести себя форма при попытке отправки её пользователем.

Для составления более сложных паттернов необходимо хорошо знать регулярные выражения.

Более сложный пример: валидация номера телефона.

Валидация input с помощью javascript

Теперь будем проверять правильность ввода с помощью JavaScript. С таким подходом можно более оперативно оповещать пользователя о неверном вводе. Повешаем на событие keyup функцию проверки правильности ввода

HTML

Выполнение кода в зависимости от нажатой клавиши

Давайте теперь будем выполнять необходимые действия в зависимости от нажатой клавиши

Для этой задачи воспользуемся оператором switch

В конструкции case укажите номер кнопки, для которой будет выполнен необходимый код.

document.onkeydown=function(e){switch(e.keyCode){case49:console.log('Нажата единица');break;case50:console.log('Нажата двойка');break;case32:console.log('Нажат пробел');break;case9:console.log('Нажат tab');break;case16:console.log('Нажат shift');break;default:console.log(e.keyCode);}};

Вместо console.log выполняйте необходимые действия.

Если была нажата клавиша, которой нет в списке, то для неё можете выполнить другой код. Писать в default

Закрытие меню при клике вне его — нативный javascript

Как во втором примере будем закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку. Но теперь уже на чистом JavaScript.

Закрытие меню при клике вне его, а также по нажатию на кнопку

Рассмотрим ситуацию, когда необходимо закрывать меню при клике вне его области, а также открывать и закрывать меню по клику на кнопку.

Структура

Информация о нажатой кнопке мыши javascript

Рассмотрим, как определить какая кнопка мыши нажимается над объектом: левая кнопка, правая или дабл клик

Выполнение кода при клике левой кнопкой мыши

document.querySelector(selector).onclick=function(e){if(e.which==1){console.log('Нажата левая кнопка мыши');}}

Выполнение кода при клике правой кнопкой мыши

document.querySelector(selector).oncontextmenu=function(e){e.preventDefault();console.log('Нажата правая кнопка мыши');}

Выполнение кода при двойном клике по кнопке

document.querySelector(selector).ondblclick=function(){console.log('Двойное нажатие левой кнопки мыши');}

Как использовать «mobile-detect.js»

Mobile-detect.js использует тот же метод, но также предоставляет функции API для легкого получения необходимой информации.

Использовать mobile-detect.js очень просто. Сначала импортируйте библиотеку на свою страницу.

Как определить safari

Для примера, определим Safari браузер с помощью JavaScript.

Как отследить комбинации нажатых клавиш

Отследить нажатие CTRL, SHIFT и ALT можно также другими способами (данный способ необходим чтобы отследить комбинации)

• ctrlKey — CTRL
• altKey — ALT
• shiftKey — SHIFT

Например, отследить нажатие CTRL можно следующим образом:

document.addEventListener('keydown',function(e){if(e.ctrlKey){console.log('Был нажат CTRL');document.getElementById('btnClick').textContent='CTRL';}});

Используя всю ранее полученную информацию, определим нажатую комбинацию клавиш, например, CTRL F5

document.addEventListener('keydown',function(e){e.preventDefault();if(e.ctrlKey&&event.key=='F5'){console.log('Была нажата комбинация клавиш CTRL   F5');}});

Как вы могли заметить, обращаться к клавишам в JavaScript можно несколькими способами. Например, следующие строки кода позволяют нам получить один и тот же результат:

event.key == ‘F5’ аналогично e.keyCode == 116

Мы рассмотрели, как получить информацию о нажатой клавише на клавиатуре. Теперь давайте рассмотрим, как обработать события мыши.

Клик вне элемента jquery

Рассмотрим, как отловить клик за пределами блока

Пример: имеем блок, пусть это будет всплывающее окно .pop-up. Будем закрывать поп-ап при клике за его пределами:

Клик вне элемента на чистом javascript

В данном примере мы скрываем блок при клике вне элемента с классом pop-up

constpopup=document.querySelector('.pop-up');document.onclick=function(e){if(event.target.className!='pop-up'){popup.style.display='none';};};

Методы watchposition и clearwatch

Метод watchPocation используется когда нужно получать данные о местоположении каждый раз, когда оно меняется. Метод возвращает целое число, являющееся идентификатором задачи.

navigator.geolocation.watchPosition(success[, error[, options]])

Метод clearWatch предназначен для удаления задачи по её идентификатору, которую вы создали посредством watchPosition.

// создаём задачу и сохраняем её идентификатор в watchId
let watchId = navigator.geolocation.watchPosition(success, error, options);
// удаляем задачу по её идентификатору
clearWatch(watchId);

Объект geolocation

Объект geolocation предназначен для определения местоположения устройства. Доступ к этому объекту осуществляется через свойство «navigator.geolocation»:

const geo = navigator.geolocation;
// или так
// const geo = window.navigator.geolocation;

Узнать поддерживает ли браузер геолокацию, можно посредством проверки существования свойства geolocation в объекте navigator:

if (!navigator.geolocation) {
  console.error('Ваш браузер не поддерживает геолокацию!');
}

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

Получение текущего местоположения пользователя

Получение текущего местоположения пользователя осуществляется через метод getCurrentPosition.

// аргумент success - обязательный
navigator.geolocation.getCurrentPosition(success[, error[, options]);

Этот метод посылает асинхронный запрос. В случае успеха мы можем получить местоположение устройства, в противном случае – нет.

Метод getCurrentPosition принимает 3 аргумента:

В options можно установить:

В функцию success передаётся в качестве первого аргумента объект GeolocationPosition. Он содержит информацию о местоположении устройства (coords) и времени, когда оно было получено (timestamp).

Объект coords содержит следующие свойства:

Пример получения местоположения устройства:

// при успешном получении сведений о местонахождении
function success(position) {
  // position - объект GeolocationPosition, содержащий информацию о местонахождении
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  const altitude = position.coords.altitude;
  const speed = position.coords.speed;
  // выведем значения в консоль
  console.log(`Широта: ${latitude}°`);
  console.log(`Долгота: ${longitude}°`);
  console.log(`Высота над уровнем моря: ${altitude}м`);
  console.log(`Скорость: ${speed}м/c`);
}
function error() {
  console.log('Произошла ошибка при определении местоположения!');
}
if (!navigator.geolocation) {
  // получаем текущее местоположение пользователя
  navigator.geolocation.getCurrentPosition(success, error);
}

Пример

Например, выведем все свойства и методы объекта Navigator на веб-страницу:

Свойства и методы объекта navigator

Объект navigator имеет свойства и методы. Очень часто они используется для того чтобы узнать, какие функции поддерживаются браузером, а какие нет.

Свойства объекта navigator:

Методы объекта navigator:

Стилизация верного и неверного поля ввода.

В основном комбинированием каких-то из этих трёх свойств мы оповещаем пользователя о возможности дальнейшей отправки формы.

Верный ввод

input:valid{border-color:green;color:green;box-shadow:none;}

НЕверный ввод

input:invalid{border-color:red;color:red;box-shadow:none;}

Верный ввод при фокусе

input:focus:valid{border-color:green;color:green;box-shadow:none;}

НЕверный ввод при фокусе

input:focus:invalid{border-color:red;color:red;box-shadow:none;}

Верный ввод при фокусе обязательного input

input:focus:required:valid{border-color:green;color:green;box-shadow:none;}

НЕверный ввод при фокусе обязательного input

input:focus:required:invalid{border-color:green;color:green;box-shadow:none;}

Достаточно гибко можно стилизовать поля для ввода.