Created
August 22, 2014 13:00
-
-
Save devbyray/5574bd83ed44ef93abf2 to your computer and use it in GitHub Desktop.
JavaScript file to check the deviceOS to get the right input type for the numeric keyboard
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Testing mobile keyboards with numbers</title> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <link href="assets/css/style.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <main class="full main" role="main"> | |
| <h1>Testing mobile keyboards with numbers</h1> | |
| <div class="row"> | |
| <label> | |
| <span>Input type number</span> | |
| <input type="number" name="number" value="" placeholder="I'm an input number field"> | |
| </label> | |
| </div> | |
| <div class="row"> | |
| <label> | |
| <span>Input type tel</span> | |
| <input type="tel" name="tel" value="" placeholder="I'm an input tel field"> | |
| </label> | |
| </div> | |
| </main> | |
| <div id="useragent"> | |
| </div> | |
| <script src="assets/js/scripts.min.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| 'use strict'; | |
| // androidTypes: { | |
| // numberKeyboard : [ | |
| // "4.2.2", "4.4.4", "4.4.2", "2.3.3" | |
| // ], | |
| // telKeyboard : [ | |
| // "4.1.2" | |
| // ] | |
| // } | |
| var useragent = navigator.userAgent; | |
| function deviceOS() { | |
| if(useragent.match(/Android/i)) { | |
| return 'android'; | |
| } else if(useragent.match(/iPhone/i)) { | |
| return 'iphone'; | |
| } else if(useragent.match(/iPod/i)) { | |
| return 'ipod'; | |
| } else if(useragent.match(/iPad/i)) { | |
| return 'ipad'; | |
| } else if(useragent.match(/Windows Phone/i)) { | |
| return 'windows phone'; | |
| } else { | |
| return 'no-device'; | |
| } | |
| } | |
| var paragraph = document.createElement("p"); | |
| var txtnode = document.createTextNode(useragent); | |
| paragraph.appendChild(txtnode); | |
| var element = document.getElementById("useragent"); | |
| element.appendChild(paragraph); | |
| function setRightInputKeyboard() { | |
| var input = document.getElementsByTagName('input'); | |
| if(deviceOS() === 'iphone' || deviceOS() === 'ipod' || deviceOS() === 'ipad') { | |
| console.log('deviceOS: ', deviceOS()); | |
| for(var i in input){ | |
| if(input[i].type === 'number'){ | |
| input[i].type = 'tel'; | |
| console.log(input[i], 'Changed to tel'); | |
| } | |
| } | |
| } else if(deviceOS() === 'android') { | |
| if(useragent.match(/Android 4.1.2/i)) { | |
| for(var i in input){ | |
| if(input[i].type === 'number'){ | |
| input[i].type = 'tel'; | |
| console.log(input[i], 'Changed to number'); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| setRightInputKeyboard(); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .full { | |
| width: 100%; | |
| background: #fff; | |
| max-width: 1024px; | |
| padding: 2rem; | |
| position: relative; | |
| margin: 0 auto; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; } | |
| .row { | |
| margin-bottom: 1.6rem; | |
| } | |
| .row span { | |
| display: block; | |
| width: 100%; | |
| } | |
| .row input { | |
| width: 100%; | |
| display: block; | |
| line-height: 1.8; | |
| padding: 1rem; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| color: #fff; | |
| } | |
| .row input[type="tel"] { | |
| background-color: green; | |
| } | |
| .row input[type="number"] { | |
| background-color: red; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment