表单文本输入框默认值的自动清除和恢复 -- defaultValue/setAttribute/focus/blur

 表单的文本输入框有默认值时，当输入框聚焦时默认值自动清除，不输入任何值焦点离开输入框时恢复默认值（我把情况说明白了？），这种情况一般出现在搜索和填写表单的时候，下面是我不同时期处理这种事情的不同方法。

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");