Skip to content

Instantly share code, notes, and snippets.

@PikachuEXE
Created April 26, 2013 04:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PikachuEXE/5465107 to your computer and use it in GitHub Desktop.
Save PikachuEXE/5465107 to your computer and use it in GitHub Desktop.
jQuery HTML5 placeholder fix Written in CoffeeScript and converted into JavaScript later This is supposed to deal with dynamically loaded elements Not tested though
/**
* This hack creates the placeholder effect on old browsers
*
* Source: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
* Dependency: jQuery & Modernizr
*
* It also add a class to the input so you can style it to look like normal placeholder
*/
jQuery(function($) {
var placeholder_class, placeholder_selector;
if (!Modernizr.input.placeholder) {
placeholder_class = 'browser-hack-placeholder';
placeholder_selector = '[placeholder]';
$(document).on('focus', placeholder_selector(function() {
var input;
input = $(this);
if (input.val() === input.attr("placeholder")) {
input.val("");
input.removeClass(placeholder_class);
}
}));
$(document).on('blur', placeholder_selector, function() {
var input;
input = $(this);
if (input.val() === "" || input.val() === input.attr("placeholder")) {
input.addClass(placeholder_class);
input.val(input.attr("placeholder"));
}
});
$(document).on('submit', 'form', function() {
$(this).find("[placeholder]").each(function() {
var input;
input = $(this);
if (input.val() === input.attr("placeholder")) {
input.val("");
}
});
});
$(placeholder_selector).trigger('blur');
$(document).ajaxSuccess(function() {
$(placeholder_selector).trigger('blur');
});
}
});
###*
* This hack creates the placeholder effect on old browsers
*
* Source: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
* Dependency: jQuery & Modernizr
*
* It also add a class to the input so you can style it to look like normal placeholder
###
jQuery ($) ->
unless Modernizr.input.placeholder
placeholder_class = 'browser-hack-placeholder'
placeholder_selector = '[placeholder]'
$(document).on 'focus', placeholder_selector ->
input = $(this)
if input.val() is input.attr("placeholder")
input.val ""
input.removeClass placeholder_class
$(document).on 'blur', placeholder_selector, ->
input = $(this)
if input.val() is "" or input.val() is input.attr("placeholder")
input.addClass placeholder_class
input.val input.attr("placeholder")
$(document).on 'submit', 'form', ->
$(this).find("[placeholder]").each ->
input = $(this)
input.val "" if input.val() is input.attr("placeholder")
# Display placeholders on page load
$(placeholder_selector).trigger('blur')
# Display placeholders after ajax event
$(document).ajaxSuccess ->
$(placeholder_selector).trigger('blur')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment