首頁 > 開發者 > JavaScript
JS實現輸入框提示文字點擊時消失效果，js輸入框
本文執行個體講述了JS實現輸入框提示文字點擊時消失效果。分享給大家供大家參考，具體如下：
在網頁登陸框裡的輸入框裡常常會看到提示你輸入什麼內容的字樣顏色比較淡的，這個就是“文字框點擊時文字消失，失去焦點時文字出現”這個效果；這個效果用個JS就可以完成，這個效果是做網站的人必備的JS代碼；自己會寫JS的寫寫也快，不會寫的就需要代碼收集以作備用，用到的時候就方便多了。
下面就是這個效果實現用到的JS代碼：
<script language="JavaScript" type="text/javascript"> function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(myinput,"click",function(){ myinput.value = ""; }) addListener(myinput,"blur",function(){ myinput.value = "請輸入您的ID"; })</script>
只要把這段代碼儲存成一個JS檔案就可以的，在網頁裡做好引用就OK，輕鬆的完成這個給不會程式的人看起來很難的效果。
Html代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charsetGB2312" /> <title>文字框點擊時文字消失，失去焦點時文字出現</title> </head> <body> <input type="text" value="請輸入您的ID" id="myinput" /> </body></html><script language="JavaScript" type="text/javascript"> function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } var myinput = document.getElementById("myinput"); addListener(myinput,"click",function(){ myinput.value = ""; }) addListener(myinput,"blur",function(){ myinput.value = "請輸入您的ID"; })</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
