JS實現(xiàn)輸入框提示文字點(diǎn)擊時消失效果
本文實例講述了JS實現(xiàn)輸入框提示文字點(diǎn)擊時消失效果。分享給大家供大家參考,具體如下:
在網(wǎng)頁登陸框里的輸入框里常常會看到提示你輸入什么內(nèi)容的字樣顏色比較淡的,這個就是“文本框點(diǎn)擊時文字消失,失去焦點(diǎn)時文字出現(xiàn)”這個效果;這個效果用個JS就可以完成,這個效果是做網(wǎng)站的人必備的JS代碼;自己會寫JS的寫寫也快,不會寫的就需要代碼收集以作備用,用到的時候就方便多了。
下面就是這個效果實現(xiàn)用到的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文件就可以的,在網(wǎng)頁里做好引用就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>文本框點(diǎn)擊時文字消失,失去焦點(diǎn)時文字出現(xiàn)</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>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JS實現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式
這篇文章主要為大家分享了如何通過前端js將pdf文件轉(zhuǎn)為圖片格式,并且支持翻頁預(yù)覽、以及圖片打包下載,文中的示例代碼簡潔易懂,需要的可以參考一下2023-05-05JS基于封裝函數(shù)實現(xiàn)的表格分頁完整示例
這篇文章主要介紹了JS基于封裝函數(shù)實現(xiàn)的表格分頁,結(jié)合完整實例形式分析了javascript針對table表格數(shù)據(jù)的遍歷、讀取以及模擬分頁顯示的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06Bootstrap treeview實現(xiàn)動態(tài)加載數(shù)據(jù)并添加快捷搜索功能
本文實現(xiàn)了運(yùn)用bootstrap treeview實現(xiàn)動態(tài)加載數(shù)據(jù),并且添加快捷搜索功能,需要的朋友參考下2018-01-01js 動態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
下面小編就為大家?guī)硪黄猨s 動態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法。小編覺得聽不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07在vscode上直接運(yùn)行typescript的操作方法
在學(xué)習(xí)typescript的過程中發(fā)現(xiàn)在vscode上不能很好地的輸出typescript的運(yùn)行結(jié)果,需要先將typescript編譯為javascript,在通過node執(zhí)行js文件得到結(jié)果,這篇文章給大家介紹如何在vscode上直接運(yùn)行typescript,感興趣的朋友一起看看吧2023-12-12js實現(xiàn)數(shù)字從零慢慢增加到指定數(shù)字示例
今天小編就為大家分享一篇js實現(xiàn)數(shù)字從零慢慢增加到指定數(shù)字示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11