控制input输入框提示信息显示和隐藏的方法

最新推荐文章于 2024-08-09 06:13:01 发布

chijing5574

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量1.1k

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/DukeSwain/blog/639391

版权

<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>

转载于:https://my.oschina.net/DukeSwain/blog/639391

chijing5574

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
控制input输入框提示信息显示和隐藏的方法

<input type="text" value="搜索" class="search" id="search" onfocus="if(this.value == '搜索'){value =''}" onblur="if (this.value ==''){ value ='搜索'}...
复制链接

扫一扫