VB icon

Removing Placeholder in JQuery

Email
Submitted on: 9/25/2016 11:04:51 PM
By: Jake R. Pomperada  
Level: Beginner
User Rating: Unrated
Compatibility: JavaScript
Views: 2082
author picture
 
     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. My mobile number here in the Philippines is 09173084360.
 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
				
'**************************************
' Name: Removing Placeholder in JQuery
' Description: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. 
My mobile number here in the Philippines is 09173084360.
' By: Jake R. Pomperada
'**************************************

<!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>


Other 108 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this code (in the Beginner category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.