Instantly share code, notes, and snippets.

Embed
What would you like to do?
An example which demonstrates how to override default behaviors of the iOS Keyboard for Mobile Web Applications.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>iOS HTML5 input element Example</title>
<meta name="author" content="Eric Feminella" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
/* just some basic styles */
html, body {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
#app-container {
width: 300px;
padding: 10px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 18px;
}
form {
width: 100%;
}
input {
width: 280px;
margin: 0 auto 10px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 10px;
text-align: left;
font-size: 16px;
font-weight: 400;
display: block;
}
input[type="submit"] {
text-align: center;
width: 200px
margin: 15px auto;
cursor: pointer;
display: inline-block;
}
</style>
<script>
$(function(){
$('form input[type="submit"]').click(function(evt){
// programmatically close the keyboard by invoking blur() on the activeElement
document.activeElement.blur();
return false;
});
});
</script>
</head>
<body>
<article id="app-container">
<header>
<h1>iOS HTML5 input element Example</h1>
</header>
<form>
<!-- set autocapitalize="on" to enable autocaps (the default)-->
<input placeholder="autocapitalize on" type="text" autocapitalize="on">
<!-- set autocapitalize="off" to disable autocaps -->
<input type="text" placeholder="autocapitalize off" autocapitalize="off">
<!-- set autocorrect="on" to enable autocorrect (the default)-->
<input type="text" placeholder="autocorrect on" autocorrect="on">
<!-- set autocorrect="off" to disable autocorrect -->
<input type="text" placeholder="autocorrect off" autocorrect="off">
<!-- input element of type 'tel' displays iOS telephone keyboard -->
<input type="tel" placeholder="telephone keyboard">
<!-- input element of type 'url' displays iOS url keyboard -->
<input type="url" placeholder="url keyboard">
<!-- input element of type 'email' displays iOS email keyboard -->
<input type="email" placeholder="email keyboard">
<!-- input element of type 'text' with regex pattern displays iOS numeric keyboard -->
<input type="text" placeholder="numeric keyboard" pattern="\d*." />
<!-- input element of type 'text' displays standard iOS keyboard -->
<input type="text" placeholder="text keyboard">
<input type="submit" value="Submit" />
</form>
</article>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment