快捷導(dǎo)航

控制input輸入框中提示信息的顯示和隱藏的方法

更新時(shí)間：2014年02月12日 16:02:07 作者：

這篇文章主要介紹了怎樣控制input輸入框中提示信息的顯示和隱藏 ,需要的朋友可以參考下

在運(yùn)用html+css+javascrpt進(jìn)行頁(yè)面制作時(shí)，我們往往會(huì)遇到一些影響用戶(hù)體驗(yàn)，而又容易被我們忽視的小細(xì)節(jié)。比如，input輸入框中的提示信息，怎樣才能根據(jù)對(duì)象獲得和失去焦點(diǎn)而實(shí)現(xiàn)其顯示和隱藏。今天在這里，想跟大家分享一下這個(gè)小技巧，希望各位大神不要拍磚哦~~~

一、要求

input輸入框，在光標(biāo)顯示時(shí)，隱藏提示信息；光標(biāo)離開(kāi)輸入框時(shí)，顯示提示信息。

二、方法

1、給該input取id名，Onfocus=”方法名1(this)”，onblur=”方法名2(this)”

2、聲明變量value，通過(guò)id名獲得該input

3、function 方法名1(inputObj){

復(fù)制代碼代碼如下:

 
if(inputObj.value==”……”){ 

inputObj.value=””; 

} 

}

4、function 方法名2(inputObj){

復(fù)制代碼代碼如下:

 
if(inputObj.value==””){ 

inputObj.value=”……”; 

} 

}

5、注意：如果同一個(gè)頁(yè)面中有多個(gè)input標(biāo)簽需要同樣的設(shè)置，則方法名不能一致。

三、實(shí)例

復(fù)制代碼代碼如下:

 
<!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>無(wú)標(biāo)題文檔</title> 
<link href="file:///E|/做過(guò)的網(wǎng)站/midi/css/index.css" type="text/css" rel="stylesheet" /> 
<script type="text/javascript"> 
var value=document.getElementById('shuru'); 
function qingkong(inputObj){ 
if(inputObj.value=="請(qǐng)輸入您的姓名"){ 
inputObj.value=""; 
} 
} 
function likai(inputObj){ 
if(inputObj.value==''){ 
inputObj.value="請(qǐng)輸入您的姓名"; 
} 
} 

</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="請(qǐng)輸入歌曲名或歌手名" onfocus="qingkong(this)" onblur="likai(this)"/> 
</body> 
</html> 