Friday, December 21, 2012
Create placeholder input field in javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function removeText(id, val)
{
if(document.getElementById(id).placeholder == val){
document.getElementById(id).placeholder ='';
document.getElementById(id).style.color= '#000';
}
}
function newText(id, val)
{
if(document.getElementById(id).value == ''){
document.getElementById(id).placeholder = val;
document.getElementById(id).style.color = '#aaa';
}
}
</script>
</head>
<body>
<input type="text" name="abc" id="abc" placeholder="Enter your name" onfocus="removeText(this.id, 'Enter your name')" onblur="newText(this.id, 'Enter your name')"/>
<input type="text" name="abc1" id="abc1" placeholder="Enter your address" onfocus="removeText(this.id,'Enter your address')" onblur="newText(this.id,'Enter your address')"/>
<input type="text" name="abc2" id="abc2" placeholder="Enter your phone" onfocus="removeText(this.id,'Enter your phone')" onblur="newText(this.id,'Enter your phone')"/>
</body>
</html>
see the demo here.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment