javascript input文本框添加提示文本效果
这种效果的应用应该非常的多的了。也就是当点击文本框的时候，能够清除里面的提示文本，如果没有填写任何内容，焦点离开的时候，再会恢复到提示文本状态，本章节分享一个对文本框的批量操作，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
input{
width:200px;
height:24px;
line-height:24px;
border:1px solid #999;
background:#ccc;
margin:15px 0 0 100px;
padding:4px;
color:#666;
}
.current{
background:#E0FEE4;
border:1px solid #093;
}
</style>
<script type="text/javascript">
window.onload=function(){
var aInp=document.getElementsByTagName('input');
var y=0;
var sArray=[];
for(y=0; y<aInp.length; y++){
aInp[y].index=y;
sArray.push(aInp[y].value);
aInp[y].onfocus=function(){
if(sArray[this.index]==aInp[this.index].value){
aInp[this.index].value='';
}
aInp[this.index].className='current';
};
aInp[y].onblur=function(){
if(aInp[this.index].value==''){
aInp[this.index].value=sArray[this.index];
}
aInp[this.index].className='';
};
}
}
</script>
</head>
<body>
<input name="" type="text" value="请输入姓名："/><br />
<input name="" type="text" value="请输入昵称："/><br />
<input name="" type="text" value="输入验证码："/><br />
<input name="" type="text" value="请输入手机号码："/><br />
<input name="" type="text" value="请输入电子邮件："/>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。（2）.var aInp=document.getElementsByTagName('input'),获取input元素集合。
（3）.var y=0,声明一个变量并赋值为0。
（4）.var sArray=[],声明一个数组用来存放文本框中原来的提示文本。
（5）.for(y=0;y<aInp.length;y++){}，遍历每一个input元素。
（6）.aInp[y].index=y,为当前input元素添加一个index属性，并赋值为当前的索引。
（7）.sArray.push(aInp[y].value),将当前input元素的value值存入数组。
（8）.aInp[y].onfocus=function(){
if(sArray[this.index]==aInp[this.index].value){
aInp[this.index].value='';
}
aInp[this.index].className='current';
},为每一个input元素注册onfocus事件处理函数。
判断如果当前input元素的原来value值和当前的value相同，那么就清空文本框。
并且设置当前文本框的class属性值为current。
（9）.aInp[y].onblur=function(){
if(aInp[this.index].value==''){
aInp[this.index].value=sArray[this.index];
}
aInp[this.index].className='';
},注册onblur事件处理函数。
如果当前文本框的value值等于空，那么就恢复默认的value值。
并且将class属性值设置为空。
二.相关阅读:
（1）.getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。
（2）.push()方法可以参阅javascrip push()一章节。
（3）.onfocus事件可以参阅javascript focus事件一章节。
（4）.className属性可以参阅js className一章节。
（5）.onblur事件可以参阅javascript blur事件一章节。