How to show a custom message when user start type on a HTML element?

JavaScript
1

hi there

my question is suppose When a user start typing on a input field then i want to show some message like instructions etc
like this

How can I acheive this?

Thanks

2

You can do it with css by making a message appear on focus.

e.g.

input:focus + .message {display:block}

(Although its better to move the message off screen with position absolute and bring it back on screen when needed rather than using display:none)

Here’s a version for ie9+ that fades the message in.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
label, input {
	display:block;
	margin:10px;
	position:relative;
}
input[type=text] {
	width:200px;
	height:18px;
	line-height:18px;
	padding:5px 10px;
	border:1px solid #000;
}
/* spike on bottom edge */
.spike-bottom:before, .spike-bottom:after {
	content:" ";
	display:block;
	width:0;
	height:0;
	position:absolute;
	left:50%;
	right:auto;
	margin-left:-5px;
	top:auto;
	bottom:-9px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #f5f5f5;
	border-bottom:none;
	z-index:2;
}
/* spike on bottom edge border */
.spike-bottom:after {
	z-index:1;
	border-top:10px solid #ddd;
	bottom:-10px;
}
* html .help {
	display:none
}
.help-message {
	position:absolute;
	font-size:13px;
	line-height:1.2;
	color:#000;
	white-space:normal;
	background:#f5f5f5;
	width:176px;
	height:auto;
	max-height:200px;
	padding:7px 12px;
	border:1px solid #ddd;
	margin:-25px 0 0 27px;
	opacity:0;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-webkit-transition:opacity .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	z-index:-1;
	pointer-events:none;
	box-shadow:5px 5px 10px rgba(0,0,0,0.3);
}
*+html .help-message {
	left:-999em
}
.help-message p {
	margin:0
}
.with-tooltip:focus + .help-message {
	opacity:1;
	z-index:99;
	margin:-95px 0 0 37px;
	outline:0;
}
</style>
</head>

<body>
<form name="form1" method="post" action="">
		<fieldset>
				<legend>Example Form</legend>
				<label for="Test">Input Label</label>
				<input class="with-tooltip" type="text" name="Test" id="Test" placeholder="Start Typing">
				<div class="help-message spike-bottom">
						<p>Lorem ipsum sit dolor amet dunc sin dolore condimentum</p>
				</div>
				<label for="Test2">Input Label</label>
				<input class="with-tooltip" type="text" name="Test" id="Test2" placeholder="Start Typing">
				<div class="help-message spike-bottom">
						<p>Lorem ipsum sit dolor amet dunc sin dolore condimentum</p>
				</div>
				<label for="Test3">Input Label</label>
				<input class="with-tooltip" type="text" name="Test" id="Test3" placeholder="Start Typing">
				<div class="help-message spike-bottom">
						<p>Lorem ipsum sit dolor amet dunc sin dolore condimentum</p>
				</div>
		</fieldset>
</form>
</body>
</html>

I’ve only just copied that quickly from an old demo so needs tidying up but shows the general idea.

If you don’t want the transition effect then you should be able to make it work back to IE8.

3

@PaulOB
I will try your approach and will come back with some code if I will face some problem

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.