表单文本输入框默认值的自动清除和恢复

1）初始： 见得最多最原始的方法，像一锅粥一样 和html标签混合 在一块，也许也有他的好处

<input type="text" name="yourname" value="用户名"  onclick ="if(this.value == '用户名'){this.value = '';}else {this.select();}"  onblur ="if(this.value == ''){ this.value = '用户名'; }" />


2）后来： 工作中很多地方都要用到这个效果，于是 脚本脱离出来 ，但是脚本和内容还 不能完全脱离 开来

<input type="text" name="yourname"  id="kw"  value="用户名" />

function init_input(id,val) {
    var ob = document.getElementById(id);
    if(ob){
        ob.onfocus = function(){
            if(this.value==val){
                this.value="";
            }else {
                this.select();
            }
        }
        ob.onblur = function() {
            if (this.value == "") { 
                 this.value = val;
            }
        }
    }
}
init_input( "kw","用户名" );


3）最后： 最近无意中去到 Jeff Starr的博客 ，于是照他的代码做了进一步改进， 脚本和内容完全脱离，并且可以批量处理

<div  id="wp" >
    <input type="text" name="yourname" value="用户名" />
    <input type="text" name="email" value="email" />
</div>

function init_input(id) {
    var inp = document.getElementById(id).getElementsByTagName('input');
    for(var i = 0; i < inp.length; i++) {
        if(inp[i].type == 'text') {
            inp[i]. setAttribute ("rel",inp[i]. defaultValue )
            inp[i].onfocus = function() {
                if(this.value == this. getAttribute ("rel")) {
                    this.value = "";
                } else {
                    this.select();
                }
            }
            inp[i].onblur = function() {
                if(this.value == "") {
                    this.value = this. getAttribute ("rel");
                }
            }
        }
    }
}

init_input("wp");

转载自 http://hi.baidu.com/webworker/item/91b7cf8e0ffe882b100ef394