表单的文本输入框有默认值时,当输入框聚焦时默认值自动清除,不输入任何值焦点离开输入框时恢复默认值(我把情况说明白了?)
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");