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事件一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容