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

表单的文本输入框有默认值时，当输入框聚焦时默认值自动清除，不输入任何值焦点离开输入框时恢复默认值（我把情况说明白了？）

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

<input type="text" name="yourname" value="用户名" οnclick="if(this.value == '用户名'){this.value = '';}else {this.select();}" οnblur="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）最后： 脚本和内容完全脱离，并且可以批量处理

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