Advanced Search

Placeholder text on fields (html, css, jquery)

/ Published in: Other
Save to your folder(s)
This is basically the code given in the book "learning jQuery " by Chaffer J & Swednerg K.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ============
  2.  = The CSS  =
  3.  ============
  4. #stikkord{
  5. 	width: 300px;
  6. 	margin-bottom: 10px;
  7. }
  8. .placeholder {
  9. 	color:#999999;
  10. 	}	
  11. .tag{
  12. 	background-color: yellow;
  13. 	font-size: 200%;
  14. 	margin:2px;
  15. 	line-height:1.2;
  16. 	}
  17.  
  18.  ===================
  19.  = The jQuery code =
  20.  ===================	
  21.  
  22. 	$(document).ready(function() {
  23. 	  var searchLabel = $('#tagsform form label').remove().text();
  24. 	  $('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
  25. 	    if (this.value == searchLabel) {
  26. 	      $(this).removeClass('placeholder').val('');
  27. 	    };
  28. 	  }).blur(function() {
  29. 	    if (this.value == '') {
  30. 	      $(this).addClass('placeholder').val(searchLabel);
  31. 	    };
  32. 	  });
  33. 	  $('#tagsform form').submit(function() {
  34. 	    if ($('#stikkord').val() == searchLabel) {
  35. 	      $('#stikkord').val('');
  36. 	    }
  37. 	  });
  38. 	});
  39.  
  40.  =================
  41.  = The HTML form =
  42.  =================
  43. 	<div id="tagsform">	
  44. 		<form>
  45. 		<label for="stikkord">Skriv inn beskrivende stikkord</label>
  46. 		<input type="text" name="stikkord" id="stikkord" />
  47. 		<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
  48. 		</form>
  49. 	</div><!-- end tagsform -->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.