Posted By

damarev on 07/29/10


Tagged

FBJS


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

mchadwick


Displaying Facebook-Like Search Inputs


 / Published in: JavaScript
 

URL: http://facebook-developer.net/2007/12/24/displaying-facebook-like-search-inputs/

  1. <?php define('BLANK_INPUT', 'Click to type');?>
  2.  
  3. <style type="text/css">
  4. input.inputblank { color:#999; } /* class to use for blank input */
  5. fieldset { border:0px; margin:1em; clear:both; }
  6. fieldset div.input label { float:left; clear:left; margin-right:5px; width:100px; text-align:right; }
  7. fieldset div.input input { float:left; width:200px; margin-bottom:0.25em; }
  8. fieldset div.submit input { float:left; clear:left; margin-left:105px; }
  9. </style>
  10.  
  11. <script type="text/javascript"><!--
  12. const BLANK_INPUT = '<?php echo addslashes(BLANK_INPUT);?>';
  13.  
  14. function trim(str) {
  15. return str.replace(/^\s+|\s+$/g, '');
  16. }
  17.  
  18. function clearInput(e, compare) {
  19. e.removeClassName('inputblank'); // remove grayed out color
  20. if (e.getValue() == compare) {
  21. e.setValue(''); // clear default text when clicked
  22. }
  23. }
  24.  
  25. function restoreInput(e, value) {
  26. if (trim(e.getValue()) == '') {
  27. e.setValue(value); // reset default text when unclicked
  28. e.addClassName('inputblank'); // display grayed out color
  29. }
  30. }
  31. //--></script>
  32.  
  33. <form action="?search">
  34. <fieldset>
  35. <div class="input">
  36. <label>Keywords:</label>
  37. <input name="keywords" type="text" class="inputtext inputsearch inputblank" onfocus="clearInput(this, BLANK_INPUT);" onblur="restoreInput(this, BLANK_INPUT);" value="<?php echo BLANK_INPUT;?>"/>
  38. </div>
  39. <div class="submit">
  40. <input type="submit" class="inputbutton inputsubmit" value="Search"/>
  41. <div>
  42. </fieldset>
  43. </form>

Report this snippet  

You need to login to post a comment.