Advanced Search

jQuery input value text toggle

/ Published in: jQuery
Save to your folder(s)
This is a jQuery custom function used for clearing the default input values of input fields without having to add a class or inline javascript like onclick or onblur. Just write your input and give it a value like you normally would and then add this function and you're good to go.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(document).ready(function(){
  2. 	jQuery.fn.inputtoggle = function(){
  3. 	  $(this).each(function(index){ 
  4. 	    var myvalue = $(this).attr("value"); 
  5. 	    $(this).focusin(function(){
  6. 	      if($(this).val() == myvalue)
  7. 	      $(this).val("");
  8. 	    });  
  9. 	    $(this).focusout(function(){
  10. 	      if($(this).val() === "")
  11. 	      $(this).val(myvalue);
  12. 	    });
  13. 	  });    
  14. 	};
  15.         //call custom inputtoggle() method on all inputs 
  16.         //you could also be more specific, and write: $("input[type=text]").inputtoggle();
  17. 	$("input").inputtoggle();             
  18.  
  19. //close jquery
  20. });
  21.  
  22. html:
  23.  
  24. very basic ... 
  25.  
  26. <input type="text" name="input_name" value="Your Value Name" />

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.