JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<h2>jQuery - Watermark on input text</h2>
<label>Email : </lable>
<input id="email" type="text" />

CSS

input.watermark { color: #999; }
	input {
		padding:4px;
		text-indent: 5px;
		width:200px;
		font-size:14px;
	}

JavaScript

$(document).ready(function() {
 
	var watermark = 'Puts your email address';
 
	//init, set watermark text and class
	$('#email').val(watermark).addClass('watermark');
 
	//if blur and no value inside, set watermark text and class again.
 	$('#email').blur(function(){
  		if ($(this).val().length == 0){
    		$(this).val(watermark).addClass('watermark');
		}
 	});
 
	//if focus and text is watermrk, set it to empty and remove the watermark class
	$('#email').focus(function(){
  		if ($(this).val() == watermark){
    		$(this).val('').removeClass('watermark');
		}
 	});
});