Hide input field placeholder (textbox watermark) on focus after one second

css, html, javascript

Solution

`jsFIddle Demo`

I would suggest using the placeholder css with a class name. Then toggle the class name on and off the element on focus / blur.

css

.hideHolder[placeholder]:focus::-webkit-input-placeholder{
  opacity: 0;
 -webkit-transition: opacity 0.5s ease-in-out;
 -moz-transition: opacity 0.5s ease-in-out;
 transition: opacity 0.5s ease-in-out;
}

/*moz support*/
.hideHolder[placeholder]:focus::-moz-placeholder{
 opacity: 0;
 -webkit-transition: opacity 0.5s ease-in-out;
 -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

js

var hideHolder = 0;
$('input[placeholder]').focus(function(){
 clearTimeout(hideHolder);
 var me = this;
 hideHolder = setTimeout(function(){
  $(me).addClass('hideHolder');       
 },1000);    
}).blur(function(){
 clearTimeout(hideHolder);
 $(this).removeClass('hideHolder');  
});

Problem

I found out that with modern browsers I can hide an input's placeholder text (textbox watermark) by using this css: ``` [placeholder]:focus::-webkit-input-placeholder { opacity: 0; } <input id="txt_first_name" type="text" placeholder="Enter Your First Name"> <input id="txt_last_name" type="text" placeholder="Enter Your Last Name"> ``` and it works. My question is how can I hide the text in an animated way on focus after 1000 millisecond? Is there any jquery/javascript tricks for it?

Original source