Toggling Default Value of Textbox on Focus

4
You might have noticed the textboxes on most of good looking sites that have some default value written in them. When you click on the textbox, it becomes blank but as the focus loses, the default value again appends to the text box. Well this is a simple trick with JavaScript. Lets see the code for performing this trick.




Check this out :

The lines that do the trick:

<input type="textbox" id="text" value="Click here..." class="text" />
 
 <script language="javascript">
 var t = document.getElementById('text');
 t.onfocus = hideText;
 t.onblur = showText;
 
 function hideText()
 {
  if(this.value == this.defaultValue){
   this.value = '';
  this.style.color = '#666666';
  }
 }

 function showText()
 {
  if(this.value == ''){
   this.value = this.defaultValue;
  this.style.color = '#cccccc';
  }
 }
 </script>
 <style>
 .text{
  color: #cccccc;
  background-color: #FFFFFF;
  -moz-border-radius: 6px 6px 6px 6px;
  border: 2px solid #DFDFDF;
  font-size: 1.7em;
  line-height: 100%;
  outline: medium none;
  padding: 3px 4px;
  width: 300px;
 }
 </style>

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

4 thoughts on “Toggling Default Value of Textbox on Focus”

  1. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!

  3. This blog Is very informative , I am really pleased to post my comment on this blog . It helped me with ocean of knowledge so I really belive you will do much better in the future . Good job web master.

  4. This is a really good read for me. Must admit that you are one of the best bloggers I have ever read. Thanks for posting this informative article

Comments are closed.