@@ -1,4 +1,4 @@ -jQuery Form Input Example Plugin 1.3.2 +jQuery Form Input Example Plugin 1.3.3 ====================================== This is a jQuery plugin to populate form inputs with example text that README.markdown @@ -7,7 +7,7 @@ <style type="text/css">html{font:small Helvetica;background:#eee;}body{margin:20px;}.example{color:#666;}.not_example{color:#c6c;}.case{margin-bottom:10px;border:1px solid #999;padding:0 10px;background:#fff;}pre{border:1px solid #996;background:#ffc;padding:5px;}h1,h3,pre,code{font-size:1em;}h1{font-size:1.5em;}input{width:200px;}</style> </head> <body> - <h1>jQuery Form Input Example Plugin 1.3.2</h1> + <h1>jQuery Form Input Example Plugin 1.3.3</h1> <p>This is both a test and usage guide for the <a href="http://mucur.name/posts/jquery-example">jQuery Form Input Example plugin</a> by <a href="http://mucur.name/">Paul Mucur</a>. Below you will find several test cases and the relevant JavaScript source code used in the test.</p> <form action="javascript:alert('Form submitted, all examples should be cleared.');"> <div class="case"> index.html @@ -1,5 +1,5 @@ /* - * jQuery Example Plugin 1.3.2 + * jQuery Example Plugin 1.3.3 * Populate form inputs with example text that disappears on focus. * * e.g. @@ -80,6 +80,28 @@ /* Reduce method calls by saving the current jQuery object. */ var $this = $(this); + /* Internet Explorer will cache form values even if they are cleared + * on unload, so this will clear any value that matches the example + * text and hasn't been specified in the value attribute. + * + * The trick is to see whether a value has been set that is + * different to the defaultValue attribute. As I do not want + * to recklessly clear form inputs that are not examples on + * document ready, only those with values that match the example + * text will be cleared. + * + * If a callback is used, it is not possible to predict + * what the example text is going to be so all non-default values + * are cleared. This means that caching is effectively disabled for + * that field. + * + * Many thanks to Klaus Hartl for this technique. + */ + if ($.browser.msie && !$this.attr('defaultValue') && + (callback ? $this.val() != '' : $this.val() == text)) { + $this.val(''); + } + /* Initially place the example text in the field if it is empty. */ if ($this.val() == '') { $this.addClass(options.class_name); jquery.example.js @@ -1,5 +1,5 @@ /* - * jQuery Example Plugin 1.3.2 + * jQuery Example Plugin 1.3.3 * Populate form inputs with example text that disappears on focus. * * e.g. @@ -26,4 +26,4 @@ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. */ -(function(A){A.fn.example=function(D,C){var B=A.extend({},A.fn.example.defaults,C);var E=A.isFunction(D);if(!A.fn.example.bound_class_names[B.class_name]){A(window).unload(function(){A("."+B.class_name).val("")});A("form").submit(function(){A(this).find("."+B.class_name).val("")});A.fn.example.bound_class_names[B.class_name]=true}return this.each(function(){var G=A(this);if(G.val()==""){G.addClass(B.class_name);G.val(E?D.call(this):D)}if(B.hide_label){var F=A("label[@for="+G.attr("id")+"]");F.next("br").hide();F.hide()}G.focus(function(){if(A(this).is("."+B.class_name)){A(this).val("");A(this).removeClass(B.class_name)}});G.blur(function(){if(A(this).val()==""){A(this).addClass(B.class_name);A(this).val(E?D.call(this):D)}})})};A.fn.example.defaults={class_name:"example",hide_label:false};A.fn.example.bound_class_names=[]})(jQuery); \ No newline at end of file +(function(A){A.fn.example=function(D,C){var B=A.extend({},A.fn.example.defaults,C);var E=A.isFunction(D);if(!A.fn.example.bound_class_names[B.class_name]){A(window).unload(function(){A("."+B.class_name).val("")});A("form").submit(function(){A(this).find("."+B.class_name).val("")});A.fn.example.bound_class_names[B.class_name]=true}return this.each(function(){var G=A(this);if(A.browser.msie&&!G.attr("defaultValue")&&(E?G.val()!="":G.val()==D)){G.val("")}if(G.val()==""){G.addClass(B.class_name);G.val(E?D.call(this):D)}if(B.hide_label){var F=A("label[@for="+G.attr("id")+"]");F.next("br").hide();F.hide()}G.focus(function(){if(A(this).is("."+B.class_name)){A(this).val("");A(this).removeClass(B.class_name)}});G.blur(function(){if(A(this).val()==""){A(this).addClass(B.class_name);A(this).val(E?D.call(this):D)}})})};A.fn.example.defaults={class_name:"example",hide_label:false};A.fn.example.bound_class_names=[]})(jQuery); \ No newline at end of file jquery.example.min.js cf4ef3848365e87a7e069fefd3d4c4af2ce73435 Paul Mucur mudge@mudge.name http://github.com/mudge/jquery_example/commit/8f03a4d8ed03d6af9760473f3b3b9c2f624c2a17 8f03a4d8ed03d6af9760473f3b3b9c2f624c2a17

2008-04-04T09:14:46-07:00

Worked around IE's overzealous caching of input values using a technique suggested by Klaus Hartl. This fixes http://plugins.jquery.com/node/2169. 7b75d259467070803c63ee702424b6fb85cdc2fb Paul Mucur mudge@mudge.name