Permalink
Browse files

Version 1.2.2: re-enable clearPlaceholder on form.submit (to prevent …

…IE bug on window.unload)
  • Loading branch information...
1 parent 7c1a33e commit 41fe91e7d0c03944eb3462f51a5d53b225722e88 @marioizquierdo committed Oct 2, 2011
Showing with 51 additions and 20 deletions.
  1. +38 −16 README.md
  2. +6 −1 src/jquery.enablePlaceholder.coffee
  3. +5 −1 src/jquery.enablePlaceholder.js
  4. +2 −2 src/jquery.enablePlaceholder.min.js
View
54 README.md
@@ -1,7 +1,7 @@
EnablePlaceholder jQuery plugin
===============================
-A very simple and lightweight jQuery plugin which enables HTML5 placeholder behavior for old browsers,
+A very simple and lightweight (1.7Kb) jQuery plugin which enables HTML5 placeholder behavior for old browsers,
focused on KISS principle, it does not support password placeholders.
Compared to many other placeholder plugins out there,
@@ -38,12 +38,11 @@ You can give it a try in the [live demo](http://jsfiddle.net/tothemario/ePVZq/em
* Allows the user to write exactly the same text as the placeholder, and recognizes it as non-placeholder text
* Has the option "withPlaceholderClass" that allow to change the CSS class added to the field element when the placeholder is present
* Adds the jQuery.support.placeholder attribute to easily check if the browser supports the HTML5 placeholder
- * Creates the jQuery method `enablePlaceholder()` to activate the placeholder behavior, that is enough for most of cases, but also has the functions `showPlaceholder()`, `clearPlaceholder()` and `updatePlaceholder(text)` to give extra flexibility to the developer
-
+ * Creates the jQuery method `enablePlaceholder()` to activate the placeholder behavior, that is enough for most of cases, but also has the functions `showPlaceholder()`, `clearPlaceholder()` and `updatePlaceholder(text)` to give extra flexibility for corner cases
## Requirements: ##
- * [jQuery](http://jquery.com/) 1.4 or higher
+ * [jQuery](http://jquery.com/) 1.4 or higher. Recommended 1.6
## Intallation and Usage ##
@@ -52,7 +51,7 @@ You can give it a try in the [live demo](http://jsfiddle.net/tothemario/ePVZq/em
Download the [jquery.enablePlaceholder.min](https://github.com/marioizquierdo/enablePlaceholder/raw/master/src/jquery.enablePlaceholder.min.js) script (or the [uncompressed version](https://github.com/marioizquierdo/enablePlaceholder/raw/master/src/jquery.enablePlaceholder.js)).
-Load the jQuery library, and then, the enablePlaceholder plugin in your HTML head section:
+Load the jQuery library, and then, the enablePlaceholder plugin in your HTML head section, for example:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery/plugins/jquery.enablePlaceholder.min.js"></script>
@@ -118,7 +117,7 @@ Defaults: Instead of specify options on different places, you can specify the op
$('input').enablePlaceholder({"withPlaceholderClass": 'myclass'});
$('input').updatePlaceholder('search something', {"withPlaceholderClass": 'myclass'});
-You can write this:
+You could write this:
$.EnablePlaceholder.defaults.withPlaceholderClass = 'myClass';
@@ -128,24 +127,40 @@ You can write this:
## Using with AJAX forms ##
-The enablePlaceholder plugin sets the input value to the attr placeholder text and adds the .placeholder class to simulate the placeholder behavior.
+The enablePlaceholder plugin sets the input value to the attr placeholder text and adds the `.placeholder` class to simulate the placeholder behavior.
+
+Because the input has a value, if you submit a form the placeholder value could be accidentally submitted.
-Because the input has a value, if you submit a form the placeholder value could be accidentally submitted. This is prevent by clearing the placeholder on window.unload.
-But the ajax forms do not fire the window.unload event.
+This is prevent by clearing the placeholder on window.unload and input.patrents('form').submit, that will work for most cases.
-If you want to prevent your ajax form to send the placeholder text when the input is empty, you can use the provided methods `clearPlaceholder()` and `showPlaceholder()`:
+What happen with ajax forms is that the placeholder is cleared on submit but the page does not refresh. If you want to recover the placeholder you can use the provided method `showPlaceholder()`:
For example, using the [jquery form plugin](http://jquery.malsup.com/form/), you can do this:
- $('#ajaxForm').ajaxForm({
- beforeSubmit: function (formData, $form, options) {
- $('#ajaxForm *[placeholder]').clearPlaceholder(); // clear placeholder before submit
- },
+ var form = $('#ajaxForm');
+ var placeholderElements = form.find('*[placeholder]');
+
+ placeholderElements.enablePlaceholder();
+ form.ajaxForm({
success: function (responseText, statusText, xhr, $form) {
- $('#ajaxForm *[placeholder]').showPlaceholder(); // and show it again on success
+ placeholderElements.showPlaceholder(); // show the placeholder again on success.
}
});
+If for any reason the form.submit event is not fired and you want to manually clear the placeholder before submit, you can use the provided method `clearPlaceholder()`:
+
+For example, to send the form using ajax when click on a button, if no window.unload or form.submit events are fired, you can clear the placeholder yourself:
+
+ var form = $('#ajaxForm');
+ var placeholderElements = form.find('*[placeholder]');
+
+ placeholderElements.enablePlaceholder();
+ $('#button-to-submit').click(function () {
+ placeholderElements.clearPlaceholder(); // clear the input value if the placeholder is present.
+ $.post('ajax/test.json', form.serialize(), function (data) { // perform custom ajax request
+ placeholderElements.showPlaceholder(); // and show placeholder again on success.
+ });
+ });
## Full Example ##
@@ -193,7 +208,8 @@ HTML page with placeholder support for old browsers. This is a good simple examp
* [jsFiddle Sandbox](http://jsfiddle.net/tothemario/ePVZq/)
* [EnablePlaceholder project in plugins.jquery.com](http://plugins.jquery.com/project/EnablePlaceholder)
* [Info on styling the HTML5 placeholder](http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/)
-
+
+
## Contributing to enablePlaceholder ##
You can easily test the plugin just cloning the github repository and opening the file `SpecRunner.html`.
@@ -216,6 +232,12 @@ what I do is copy-paste in an online minimizer like this [online YUI compressor]
## Changelog ##
+2011-10-02 Mario Izquierdo Martinez <tothemario@gmail.com>
+
+ * tag version 1.2.2
+ * due to a IE error, has to recover the clearPlaceholder on form submit (because sometimes IE does not fire window.unload after for submit).
+ * update README
+
2011-08-30 Mario Izquierdo Martinez <tothemario@gmail.com>
* tag version 1.2.1
View
7 src/jquery.enablePlaceholder.coffee
@@ -1,7 +1,7 @@
###
EnablePlaceholder jQuery plugin.
https://github.com/marioizquierdo/enablePlaceholder
- version 1.2.1 (Aug 30, 2011)
+ version 1.2.2 (Oct 02, 2011)
Copyright (c) 2011 Mario Izquierdo
Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
@@ -54,6 +54,11 @@ $.fn.enablePlaceholder = (options) ->
on_focusin_clear_placeholder input, settings
on_focusout_show_placeholder input, settings
+ # Clear placeholder on form submit
+ input.parents('form').submit ->
+ input.clearPlaceholder settings
+ true
+
# Clear placeholder before leave or reload the page
$(window).unload ->
input.clearPlaceholder settings
View
6 src/jquery.enablePlaceholder.js
@@ -2,7 +2,7 @@
/*
EnablePlaceholder jQuery plugin.
https://github.com/marioizquierdo/enablePlaceholder
- version 1.2.1 (Aug 30, 2011)
+ version 1.2.2 (Oct 02, 2011)
Copyright (c) 2011 Mario Izquierdo
Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
@@ -41,6 +41,10 @@
return execute_plugin_method(this, options, function(input, settings) {
on_focusin_clear_placeholder(input, settings);
on_focusout_show_placeholder(input, settings);
+ input.parents('form').submit(function() {
+ input.clearPlaceholder(settings);
+ return true;
+ });
$(window).unload(function() {
input.clearPlaceholder(settings);
return true;
View
4 src/jquery.enablePlaceholder.min.js
@@ -1,10 +1,10 @@
/*
* EnablePlaceholder jQuery plugin.
* https://github.com/marioizquierdo/enablePlaceholder
- * version 1.2.1 (Aug 30, 2011)
+ * version 1.2.2 (Oct 02, 2011)
*
* Copyright (c) 2011 Mario Izquierdo
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*/
-(function(){var a,c,b,d;a=jQuery;a.support.placeholder=document.createElement("input").placeholder!=null;a.EnablePlaceholder={defaults:{withPlaceholderClass:"placeholder"},alsoForModernBrowsers:false};c=function(h,f,e){var g;if(!a.support.placeholder||a.EnablePlaceholder.alsoForModernBrowsers){g=a.extend({},a.EnablePlaceholder.defaults,f);return h.each(function(){return e(a(this),g)})}};b=function(e,f){return e.bind("focus focusin keydown paste",function(){return e.clearPlaceholder(f)})};d=function(e,f){return e.bind("blur focusout",function(){return e.showPlaceholder(f)})};a.fn.enablePlaceholder=function(e){return c(this,e,function(f,g){b(f,g);d(f,g);a(window).unload(function(){f.clearPlaceholder(g);return true});return f.showPlaceholder(g)})};a.fn.showPlaceholder=function(e){return c(this,e,function(f,g){if(f.val()===""){return f.val(f.attr("placeholder")).addClass(g.withPlaceholderClass).data("ph_active",true)}})};a.fn.clearPlaceholder=function(e){return c(this,e,function(f,g){if(f.data("ph_active")){return f.val("").removeClass(g.withPlaceholderClass).data("ph_active",false)}})};a.fn.updatePlaceholder=function(f,e){return this.clearPlaceholder(e).attr("placeholder",f).showPlaceholder(e)}}).call(this);
+(function(){var a,c,b,d;a=jQuery;a.support.placeholder=document.createElement("input").placeholder!=null;a.EnablePlaceholder={defaults:{withPlaceholderClass:"placeholder"},alsoForModernBrowsers:false};c=function(h,f,e){var g;if(!a.support.placeholder||a.EnablePlaceholder.alsoForModernBrowsers){g=a.extend({},a.EnablePlaceholder.defaults,f);return h.each(function(){return e(a(this),g)})}};b=function(e,f){return e.bind("focus focusin keydown paste",function(){return e.clearPlaceholder(f)})};d=function(e,f){return e.bind("blur focusout",function(){return e.showPlaceholder(f)})};a.fn.enablePlaceholder=function(e){return c(this,e,function(f,g){b(f,g);d(f,g);f.parents("form").submit(function(){f.clearPlaceholder(g);return true});a(window).unload(function(){f.clearPlaceholder(g);return true});return f.showPlaceholder(g)})};a.fn.showPlaceholder=function(e){return c(this,e,function(f,g){if(f.val()===""){return f.val(f.attr("placeholder")).addClass(g.withPlaceholderClass).data("ph_active",true)}})};a.fn.clearPlaceholder=function(e){return c(this,e,function(f,g){if(f.data("ph_active")){return f.val("").removeClass(g.withPlaceholderClass).data("ph_active",false)}})};a.fn.updatePlaceholder=function(f,e){return this.clearPlaceholder(e).attr("placeholder",f).showPlaceholder(e)}}).call(this);

0 comments on commit 41fe91e

Please sign in to comment.