Skip to content
Browse files

Added support for tel input type. Updated demo with tel and pattern e…

…xamples.
  • Loading branch information...
1 parent 136c856 commit 37c4f05bcbefb94157fd09a2f640f9c734c3853b @foo4u committed Apr 10, 2012
Showing with 15 additions and 3 deletions.
  1. +11 −0 demo.html
  2. +4 −3 jquery.htm5placeholders.js
View
11 demo.html
@@ -24,6 +24,17 @@
<input type="checkbox" id="optIn" name="optIn" value="x" />
<label for="optIn">Join our mailing list</label>
</div>
+
+ <div>
+ <label for="phoneNumber">Phone Number</label>
+ <input type="tel" name="phoneNumber" />
+ </div>
+
+ <div>
+ <label for="postalCode">Postal Code</label>
+ <input type="text" name="postalCode" pattern="[0-9]*" />
+ </div>
+
</form>
View
7 jquery.htm5placeholders.js
@@ -7,15 +7,15 @@
*/
(function( $ ) {
- var supportedInputTypes = ['text', 'email', 'password', 'search'];
+ var supportedInputTypes = ['email', 'password', 'search', 'tel', 'text'];
var placeholderSupport = function() {
var input = document.createElement('input');
return ('placeholder' in input);
};
var inputTypeSupported = function( $field ) {
- return ( $.inArray( $field.attr('type'), supportedInputTypes) >= 0);
+ return ( $.inArray( $field.attr('type'), supportedInputTypes) >= 0 );
};
$.fn.html5placeholders = function() {
@@ -25,11 +25,12 @@
if( placeholderSupport() ) {
- $form.find('input').each(function() {
+ $form.find('input').each(function() {
var $field = $(this),
$label = $form.find('label[for=' + $field.attr('name') +']').first();
+
if($label.length && inputTypeSupported( $field )) {
$field.attr('placeholder', $label.text());
$label.hide();

0 comments on commit 37c4f05

Please sign in to comment.
Something went wrong with that request. Please try again.