<input type="text" value="搜索" class="search" id="search" οnfοcus="if(this.value == '搜索'){value =''}" οnblur="if (this.value ==''){ value ='搜索'}">
或者
<input type="text" value="搜索" class="search" id="search">
var sea = document.getElementById('search');
function showValue() {
if (this.value == '' ){
this.value = '搜索';
}
}
function hiddenValue() {
if (this.value == '搜索'){
this.value = '';
}
}
sea.addEventListener('focus',hiddenValue,false);
sea.addEventListener('blur',showValue,false);
一、要求
input输入框,在光标显示时,隐藏提示信息;光标离开输入框时,显示提示信息。
二、方法
1、给该input取id名,Onfocus=”方法名1(this)”,οnblur=”方法名2(this)”
2、声明变量value,通过id名获得该input
3、function 方法名1(inputObj)
{
if(inputObj.value==”……”){
inputObj.value=””;
}
}
4、function 方法名2(inputObj)
{
if(inputObj.value==””){
inputObj.value=”……”;
}
}
5、注意:如果同一个页面中有多个input标签需要同样的设置,则方法名不能一致。
三、实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="file:///E|/做过的网站/midi/css/index.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
var value=document.getElementById('shuru');
function qingkong(inputObj){
if(inputObj.value=="请输入您的姓名"){
inputObj.value="";
}
}
function likai(inputObj){
if(inputObj.value==''){
inputObj.value="请输入您的姓名";
}
}
</script>
<style type="text/css">
/*下面这段文字,可以在ie浏览器中改变输入框的背景颜色*/
.search input{star : expression(onmouseover=function(){
this.style.backgroundColor="#FF0000"
},
onmouseout=function(){
this.style.backgroundColor="#FFFFFF"
})
}
</style>
</head>
<body>
<input type="text" id="shuru" value="请输入歌曲名或歌手名" onfocus="qingkong(this)" onblur="likai(this)"/>
</body>
</html>