Programming Help

Web Development



What's Here?

  • Members: 149,626
  • Replies: 506,753
  • Topics: 79,851
  • Snippets: 2,666
  • Tutorials: 706
  • Total Online: 2,012
  • Members: 76
  • Guests: 1,936
 

Code Snippets

  

JavaScript Source Code
Welcome to Dream.In.Code
Become an Expert!

Join 149,626 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,012 people online right now. Registration is fast and FREE... Join Now!





Search Box value changer

This script will change the value of a search box depending on its current value and whether or not it is currently focused. It also changes styles.

Submitted By: BetaWar
Actions:
Rating:
Views: 299

Language: JavaScript
Last Modified: August 12, 2008
Instructions: Just add the script and styles to their respecitve area and give an input (text, textarea, or password) an id then add the second instance of the script to the bottom of the page with a pointer to the object (via id) inside the initSearchBox() function.

Snippet


  1. <style>
  2. .active{
  3.   border: 2px solid lightblue;
  4.   color: #000;
  5.   margin: -1px;
  6. }
  7. .inactive{
  8.   margin: 0px;
  9.   border: 1px solid #bbb;
  10.   color: #999;
  11. }
  12. .blurred_active{
  13.   border: 1px solid #999;
  14.   color: #000;
  15.   margin: 0px;
  16. }
  17. </style>
  18.  
  19. <script>
  20. function initSearchBox(obj){
  21.   obj.standardValue = obj.value;
  22.   obj.onfocus = function(){
  23.     if(this.value == this.standardValue){
  24.       this.value = '';
  25.     }
  26.     this.className = 'active';
  27.   }
  28.   obj.onblur = function(){
  29.     if(this.value == ''){
  30.       this.value = this.standardValue;
  31.       this.className = 'inactive';
  32.     }
  33.     else{
  34.       this.className = 'blurred_active';
  35.     }
  36.   }
  37. }
  38. </script>
  39.  
  40. <input type="text" class="inactive" name="txt" id="t" value="Search..." />
  41.  
  42. <script>
  43. initSearchBox(document.getElementById('t'));
  44. </script>

Copy & Paste

Comments


There are currently no comments for this snippet. Be the first to comment!

Add comment


You must be registered and logged on to </dream.in.code> to leave comments.




Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month