Posted By

j4kp07 on 02/12/10


Tagged

css input jquery hints mobileme superhints


Versions (?)

Simplehints


 / Published in: jQuery
 

URL: http://www.me.com

For an example, visit MobileMe. Inspired by the writeup at Smashing Magazine. However, I wanted to take this in a direction that was easier to implement. There is the issue of accessibility without the use of Labels, but I plan on addressing this at a later date.

  1. // BEGIN JQUERY
  2. jQuery.fn.simplehints = function() {
  3. return this.each(function() {
  4. var $this = $(this);
  5.  
  6. if ($this.attr('value').length == 0)
  7. $this.attr('value', $this.attr('title'));
  8.  
  9. if ($this.attr('value').length != 0 && $this.attr('value') != $this.attr('title'))
  10. $this.addClass("bold");
  11.  
  12. $(this).focus(function () {
  13. if ($this.attr('value') == $this.attr('title'))
  14. $(this).get(0).setSelectionRange(0,0);
  15. }).keypress(function() {
  16. if ($this.attr('value') == $this.attr('title') && $this.attr('type') != 'select-one')
  17. $this.attr('value', '').addClass("bold");
  18. }).change(function() {
  19. if ($this.attr('value') != $this.attr('title'))
  20. $this.addClass("bold");
  21. if ($this.attr('value') == $this.attr('title'))
  22. $this.removeClass("bold");
  23. }).blur(function() {
  24. if ($this.attr('value') == '')
  25. $this.attr('value', $this.attr('title')).removeClass("bold");
  26. }).parents('form').submit(function(e) {
  27. if ($this.attr('value') == $this.attr('title'))
  28. $this.attr('value', '');
  29. });
  30. });
  31. };
  32.  
  33. $(document).ready(function(){
  34. $(this).find('form .hint').simplehints();
  35. });
  36.  
  37. // END JQUERY
  38.  
  39. // BEGIN CSS
  40. .input, .select, .textarea {
  41. background: #fff;
  42. border: 1px solid #aaa;
  43. padding: 5px;
  44. margin-top: 8px;
  45. margin-bottom: 5px;
  46. width: 380px;
  47. font-size: 14px;
  48. font-weight: 700;
  49. color: #bbb;
  50. }
  51.  
  52. input.bold, select.bold, textarea.bold {
  53. color: #000;
  54. }
  55. .checkbox, .radio{
  56. margin: 10px 0 0 0;
  57. }
  58.  
  59. .select{
  60. width: 390px;
  61. }
  62.  
  63. .textarea{
  64. float: left;
  65. height: 200px;
  66. width: 385px;
  67. margin-top: 15px;
  68. overflow: auto;
  69. font-family: inherit;
  70. }
  71.  
  72. // END CSS
  73.  
  74. // BEGIN HTML
  75. <input type="text" name="email" class="input hint" title="Email Address" value="" />
  76. // END HTML

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: section31 on April 28, 2010

you don't need to put it in jquery dom ready.

Posted By: j4kp07 on April 28, 2010

doh!

You need to login to post a comment.