Changing the value of an element with a placeholder via val('string')…

… will removed the placeholder class
snikch · Nov 21, 2010 · 3326ca2 · 3326ca2
1 parent 4dac5f1
commit 3326ca2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/jquery-placeholder-plugin.js b/src/jquery-placeholder-plugin.js
@@ -18,12 +18,19 @@
 		// Replace the val function to never return placeholders
 		$.fn.plVal = $.fn.val;
 		$.fn.val = function(value) {
-			if(value != undefined)
-				return $(this).plVal(value);
-
-
+
 			if(this[0]) {
         		var el = $(this[0]);
+				if(value != undefined)
+				{
+					var currentValue = el.plVal();
+					var returnValue = $(this).plVal(value);
+					if(el.hasClass(opts.activeClass) && currentValue == el.attr('placeholder')){
+						el.removeClass(opts.activeClass);
+					}
+					return returnValue;
+				}
+
         		if(el.hasClass(opts.activeClass) && el.plVal() == el.attr('placeholder')) {
            			return '';
        			} else {
@@ -35,7 +42,6 @@
 
 		// Clear placeholder values upon page reload
 		$(window).bind('beforeunload.placeholder', function() {
-			console.log('removing values');
 			$('input.' + opts.placeholderBlur).val('').attr('autocomplete','off');
 		});
 
@@ -52,7 +58,7 @@
                 return;
 
 			// Prevent values from being reapplied on refresh
-			if(opts.preventRefreshIssues):
+			if(opts.preventRefreshIssues)
 				$el.attr('autocomplete','off');
 
             $el.bind('focus.placeholder', function(){

diff --git a/tests/test.html b/tests/test.html
@@ -4,7 +4,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  <title>Dirty Forms testing page</title>
+  <title>Placeholder testing page</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
   <script src="../src/jquery-placeholder-plugin.js" type="text/javascript"></script>
   <script type="text/javascript">
@@ -13,7 +13,10 @@
 
 		$('#getval').click(function(){
 			console.log('Test value is: ' + $('#test').val());
-			});
+		});
+		$('#changeval').click(function(){
+			$('#test').val('changed value');
+		});
 	  });
   </script>
   <style>
@@ -31,6 +34,7 @@
 		<input type="text" id="test" name="test" placeholder="http://" />
 		<input type="submit" id="submit" />
 		<input type="button" id="getval" value="Get Value" />
+		<input type="button" id="changeval" value="Change Value" />
  	</form>
 
 </body>