Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript file to check the deviceOS to get the right input type for the numeric keyboard
<!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>
(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();
})();
.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
You can’t perform that action at this time.