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