Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit

commit b230407ee8c0b435711d6ae9fb7eada9f963f8d7 0 parents
@mathiasbynens authored
1  .gitattributes
@@ -0,0 +1 @@
+* crlf=input
1  .gitignore
@@ -0,0 +1 @@
+.DS_Store
32 README.md
@@ -0,0 +1,32 @@
+# HTML5 Placeholder jQuery Plugin
+
+This plugin was based on a code snippet by [Paul Irish](http://paulirish.com/), featured in [jQuery 1.4 Hawtness #1](http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish). I added some functionality, did some optimizations here and there, and made a plugin out of it.
+
+## Demo & Examples
+
+[http://mathiasbynens.be/examples/placeholder](http://mathiasbynens.be/examples/placeholder)
+
+## Example Usage
+
+### HTML
+
+ <input type="text" name="foo" placeholder="Enter some text here">
+ <input type="email" name="bar" placeholder="Enter your email address">
+ <input type="search" name="baz" placeholder="Search this site…">
+ <input type="url" name="wtf" placeholder="Enter your URL">
+ <input type="tel" name="omg" placeholder="Enter your phone number">
+
+### jQuery
+
+ $('input').placeholder();
+
+## Notes
+
+The plugin automatically checks if the browser supports the HTML5 placeholder attribute for inputs natively. If this is the case, the plugin won’t do anything.
+The plugin will ignore password inputs.
+
+## Credits
+
+Kudos to [Paul Irish](http://paulirish.com/) for his snippet and everyone from [#jquery](http://webchat.freenode.net/?channels=jquery) for the tips and ideas.
+
+_– [Mathias](http://mathiasbynens.be/)_
54 jquery.placeholder.js
@@ -0,0 +1,54 @@
+/*!
+ * HTML5 Placeholder jQuery Plugin
+ * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin
+ * @author Mathias Bynens <http://mathiasbynens.be/>
+ */
+;(function($) {
+ $.fn.placeholder = function() {
+ // Quit if there’s support for HTML5 placeholder
+ if (this[0] && 'placeholder' in document.createElement('input')) {
+ // Allow chaining
+ return this;
+ };
+ // Made this a function, because we actually need it on two different occasions:
+ // 1) Once when the DOM is loaded;
+ // 2) Once every time the focusout() is triggered.
+ function setPlaceholder($elem) {
+ if ($elem.val() === '') {
+ $elem.val($elem.attr('placeholder'));
+ };
+ };
+ function preventSubmit($elem) {
+ if ($elem.val() === $elem.attr('placeholder')) {
+ $elem.val('').focus();
+ return false;
+ };
+ };
+ // Yes, .each() — in case .placeholder() is called on several elements, which is very likely, e.g. $('input').placeholder();
+ return $(this).each(function() {
+ var $input = $(this);
+ // Quit if the current element is a password input, or not an input at all
+ if ($input.is(':password') || !$input.is(':input')) {
+ return;
+ }
+ setPlaceholder($input);
+ // Cancel both the submit event of this form and the click event of the submit button of this form
+ // I found this to be necessary when using the jQuery Validation Plugin
+ // Even preventDefault() failed — AMIDOINITRITE?!
+ $(this.form).submit(function() {
+ // preventDefault(); doesn’t seem to work here
+ preventSubmit($input);
+ }).find('input[type=submit]').click(function() {
+ // preventDefault(); doesn’t seem to work here
+ preventSubmit($input);
+ });
+ $input.focusin(function() {
+ if ($input.val() === $input.attr('placeholder')) {
+ $input.val('');
+ };
+ }).focusout(function() {
+ setPlaceholder($input);
+ });
+ });
+ };
+})(jQuery);
6 jquery.placeholder.min.js
@@ -0,0 +1,6 @@
+/*!
+ * HTML5 Placeholder jQuery Plugin
+ * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin
+ * @author Mathias Bynens <http://mathiasbynens.be/>
+ */
+(function(a){a.fn.placeholder=function(){if(this[0]&&'placeholder' in document.createElement('input')){return this}function b(d){if(d.val()===''){d.val(d.attr('placeholder'))}}function c(d){if(d.val()===d.attr('placeholder')){d.val('').focus();return false}}return a(this).each(function(){var d=a(this);if(d.is(':password')||!d.is(':input')){return}b(d);a(this.form).submit(function(){c(d)}).find('input[type=submit]').click(function(){c(d)});d.focusin(function(){if(d.val()===d.attr('placeholder')){d.val('')}}).focusout(function(){b(d)})})}})(jQuery);

0 comments on commit b230407

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