Add Image placeholder in Textbox

Normally we set a placeholder in textbox only text. Just like in textbox

First Name:

when we input any key(keypress through keyboard) placeholder will had disappear and blank textbox.

First Name:

Now  we include placeholder  image in textbox (Text + Image).

In HTML5 we used placeholder easily just tag property

placeholder = ‘ Your Placeholder Name ‘

Code	Output
<input type=’text’ placeholder=’First Name’ id=’p1′>

• This example is only text placeholder but we require a image so we define a CSS and Jquery

• with_test.css

.placeImage {background-image:url=’Your image url’no-repeat;}

• with_test.js

<script src=”jquery.js”></script>
<script>
i=0;
$(document).ready(function(){
$(“input”).keypress(function(){
$(“input #p1”).css({background-image:none});
}).blur(function() {
if($(“input #p1”).val() == ‘ ‘){

$(this).css({background-image:url=’Your image url’no-repeat;})

}

}).blur();
});
</script>

Some simple placeholder Service

placehold

lorempixel

placekitten

flickholdr