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.


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.