控制input輸入框中提示資訊的顯示和隱藏的方法
阿新 • • 發佈：2019-02-08
在運用html+css+javascrpt進行頁面製作時，我們往往會遇到一些影響使用者體驗，而又容易被我們忽視的小細節。比如，input輸入框中的提示資訊，怎樣才能根據物件獲得和失去焦點而實現其顯示和隱藏。今天在這裡，想跟大家分享一下這個小技巧，希望各位大神不要拍磚哦~~~
一、要求
input輸入框，在游標顯示時，隱藏提示資訊；游標離開輸入框時，顯示提示資訊。
二、方法
1、給該input取id名，Onfocus=”方法名1(this)”，onblur=”方法名2(this)”
2、宣告變數value，通過id名獲得該input
4、function 方法名2(inputObj){
三、例項
一、要求
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=”……”;
}
} 三、例項
<!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>