A very simple program that I wrote using JQuery that will remove the placeholder in the input textbox in HTML. The code is very easy to understand and use.
Add me at Facebook my address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
Add me at Facebook my address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Program Listing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Place Holder</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<style>
body {
font-family:arial;
font-size:16px;
font-weight:bold;
}
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
margin-bottom: 10px; /* distance between input box */
font-family:arial;
font-size:16px;
color: blue;
}
div.row{
display:table-row;
}
</style>
<body>
<div>
<h3> Remove Place Holder in JQuery </h3>
<br>
<div class="row"><label>Person's Name </label> <input id="txtName" placeholder="Person's Name" type="text"></div>
<div class="row"><label>Home Address </label> <input id="txtAddress" placeholder="Home Address" type="text"></div>
<div class="row"><label>Zip Code </label> <input id="txtZip" placeholder="Zip Code" type="text"></div>
<div class="row"><label>Telephone Number </label> <input id="txtTelephone" placeholder="Telephone Number" type="text" size="20"></div>
</div>
<script type="text/javascript">
// Person's Place Holder
$('#txtName').focus(function(){
$(this).attr('placeholder','');
});
$('#txtName').focusout(function(){
$(this).attr('placeholder','Enter Persons Name');
});
// Home Address Place Holder
$('#txtAddress').focus(function(){
$(this).attr('placeholder','');
});
$('#txtAddress').focusout(function(){
$(this).attr('placeholder','Enter Home Address');
});
// Zip Code Place Holder
$('#txtZip').focus(function(){
$(this).attr('placeholder','');
});
$('#txtZip').focusout(function(){
$(this).attr('placeholder','Enter Zip Code');
});
// Telephone Place Holder
$('#txtTelephone').focus(function(){
$(this).attr('placeholder','');
});
$('#txtTelephone').focusout(function(){
$(this).attr('placeholder','Enter Telephone Number');
});
</script>
</body>
</html>
No comments:
Post a Comment