- Detecting a mobile browser
- Vanilla js
- Валидация input с помощью html
- Валидация input с помощью javascript
- Выполнение кода в зависимости от нажатой клавиши
- Закрытие меню при клике вне его — нативный javascript
- Закрытие меню при клике вне его, а также по нажатию на кнопку
- Информация о нажатой кнопке мыши javascript
- Как использовать «mobile-detect.js»
- Как определить safari
- Как отследить комбинации нажатых клавиш
- Клик вне элемента jquery
- Клик вне элемента на чистом javascript
- Стилизация верного и неверного поля ввода.
Detecting a mobile browser
Note that Most newer-gen mobile devices now have resolutions greater than 600×400. ie, an iPhone 6….
Proof of test:
ran the most upvoted and most recent posts here, with an optional check once run like so:
(function(a){ window.isMobile = (/(android|bbd |meego). mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile. firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))
})(navigator.userAgent||navigator.vendor||window.opera);
alert("This browser was found to be a % browser.", window.isMobile ? 'mobile' : 'desktop');Somehow, the following results were returned on the following Browser Apps. Specs: iPhone 6S, iOS 10.3.1.
Safari (latest): Detected it as a mobile.
Chrome (latest): Did not detect it as a mobile.
SO, i then tested the suggestion from Lanti (https://ipad-mobile.ru/a/31864119/7183483), and it did return the proper results (mobile for all iOS devices, and desktop for my Mac). Therefore, i proceeded to edit it a little since it would fire twice (for both mobile and Tablet). I then noticed when testing on an iPad, that it also returned as a mobile, which makes sense, since the Parameters that Lanti uses check the OS more than anything. Therefore, i simply moved the tablet IF statement inside the mobile check, which would return mobile is the Tablet check was negative, and tablet otherwise. I then added the else clause for the mobile check to return as desktop/laptop, since both qualify, but then noticed that the browser detects CPU and OS brand. So i added what is returned in there as part of else if statement instead. To cap it, I added a cautionary else statement in case nothing was detected.
See bellow, will update with a test on a Windows 10 PC soon.
Oh, and i also added a ‘debugMode’ variable, to easily switch between debug and normal compiling.
Dislaimer: Full credit to Lanti, also that this was not tested on Windows Tablets… which might return desktop/laptop, since the OS is pure Windows. Will check once I find a friend who uses one.
function userAgentDetect() { let debugMode = true; if(window.navigator.userAgent.match(/Mobile/i) || window.navigator.userAgent.match(/iPhone/i) || window.navigator.userAgent.match(/iPod/i) || window.navigator.userAgent.match(/IEMobile/i) || window.navigator.userAgent.match(/Windows Phone/i) || window.navigator.userAgent.match(/Android/i) || window.navigator.userAgent.match(/BlackBerry/i) || window.navigator.userAgent.match(/webOS/i)) { if (window.navigator.userAgent.match(/Tablet/i) || window.navigator.userAgent.match(/iPad/i) || window.navigator.userAgent.match(/Nexus 7/i) || window.navigator.userAgent.match(/Nexus 10/i) || window.navigator.userAgent.match(/KFAPWI/i)) { window.deviceTypeVar = 'tablet'; if (debugMode === true) { alert('Device is a tablet - ' navigator.userAgent); } } else { if (debugMode === true) { alert('Device is a smartphone - ' navigator.userAgent); }; window.deviceTypeVar = 'smartphone'; } } else if (window.navigator.userAgent.match(/Intel Mac/i)) { if (debugMode === true) { alert('Device is a desktop or laptop- ' navigator.userAgent); } window.deviceTypeVar = 'desktop_or_laptop'; } else if (window.navigator.userAgent.match(/Nexus 7/i) || window.navigator.userAgent.match(/Nexus 10/i) || window.navigator.userAgent.match(/KFAPWI/i)) { window.deviceTypeVar = 'tablet'; if (debugMode === true) { alert('Device is a tablet - ' navigator.userAgent); } } else { if (debugMode === true) { alert('Device is unknown- ' navigator.userAgent); } window.deviceTypeVar = 'Unknown'; }
}§
Vanilla js
My first snippet simply adds four properties to the navigator object: browser, version, mobile, & webkit.
jsFiddle
Валидация 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';};};Стилизация верного и неверного поля ввода.
В основном комбинированием каких-то из этих трёх свойств мы оповещаем пользователя о возможности дальнейшей отправки формы.
Верный ввод
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;}Достаточно гибко можно стилизовать поля для ввода.


