Skip to content

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
You can’t perform that action at this time.