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

2024-05-06 16:00:43

字體：大中小

來源：轉載

供稿：網友

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

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

一、要求

input輸入框，在光標顯示時，隱藏提示信息；光標離開輸入框時，顯示提示信息。

二、方法

1、給該input取id名，Onfocus=”方法名1(this)”，onblur=”方法名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" />
<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" value="請輸入歌曲名或歌手名" onfocus="qingkong(this)" onblur="likai(this)"/>
</body>
</html>