导航

« ie8浏览器 在win7系统 下怎么安装恢复vb.net (2010等) ListView 闪烁与自动滚动  »

javascript Array数组实例 分享

JavaScript

以下代码是javascript 数组的一个实例,目的是让表单上的文本框实现动态效果,原来文本框中默认有个值,如:您的姓名(灰色),意在提示,鼠标点击之后默认值消失,若焦点离开(鼠标点别的地方),又会出现默认值。

而其中有多个文本框,像“您的姓名”,“您的邮箱”,“您的需求等”,原来要实现效果代码如下:

<script language="javascript">

    var s=document.getElementById("name");
    s.onfocus=function(){if(this.value==this.defaultValue)this.value=''};
    s.onblur=function (){if(/^\s*$/.test(this.value)){this.value=this.defaultValue;this.style.color='#aaa'}}
    s.onkeydown=function(){    this.style.color='#333'}
    var k=document.getElementById("email");
    k.onfocus=function(){if(this.value==this.defaultValue)this.value=''};
    k.onblur=function (){if(/^\s*$/.test(this.value)){this.value=this.defaultValue;this.style.color='#aaa'}}
    k.onkeydown=function(){    this.style.color='#333'}
    var j=document.getElementById("web");
    j.onfocus=function(){if(this.value==this.defaultValue)this.value=''};
    j.onblur=function (){if(/^\s*$/.test(this.value)){this.value=this.defaultValue;this.style.color='#aaa'}}
    j.onkeydown=function(){    this.style.color='#333'}
    var t=document.getElementById("txt");
    t.onfocus=function(){if(this.value==this.defaultValue)this.value=''};
    t.onblur=function (){if(/^\s*$/.test(this.value)){this.value=this.defaultValue;this.style.color='#aaa'}}
    t.onkeydown=function(){    this.style.color='#333'}
</script>

现在通过javascrip Array数组功能来简化:

<script language="javascript">
       
    var allElem = new Array();
    allElem.push('name');
    allElem.push('email');
    allElem.push('web');
    allElem.push('txt');
    
    for (var i=0; i<allElem.length; i++) {
       var elem = document.getElementById(allElem[i]);
      elem.onfocus=function(){if(this.value==this.defaultValue)this.value=''};
      elem.onblur=function (){if(/^\s*$/.test(this.value)){this.value=this.defaultValue;this.style.color='#aaa'}}
      elem.onkeydown=function(){    this.style.color='#333'}
 
 }
   
</script>
两种实现的效果是一样的。

  • 顶一下





原创文章如转载,请注明:转载自落日故乡

本文链接地址:http://www.spersky.com/post/413.html

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

内容搜索


常用链接

最新评论及回复

Powered By Z-Blog

Copyright spersky All Rights Reserved.Theme Moonlight,Calf modified.