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