快捷導(dǎo)航

JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果

更新時(shí)間：2015年11月26日 14:17:02 作者：yexingwen

這篇文章主要介紹了JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果,可實(shí)現(xiàn)使用JavaScript判斷密碼框是否獲得焦點(diǎn)來隱藏與顯示提示文字,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果。分享給大家供大家參考，具體如下：

思路：

1、首先用把密碼框用txt暫時(shí)替代，并賦上默認(rèn)值 <input type="text" value="請輸入密碼" />
2、當(dāng)文本框獲取焦點(diǎn)后，把默認(rèn)值清空，把type改為password。
3、當(dāng)文本框失去焦點(diǎn)后，把type改為txt，把默認(rèn)值設(shè)為“請輸入密碼”。

JS代碼：

window.onload=function(){
　　var input=document.getElementById('input');
　　input.onfocus=function(){
　　　　if(this.value=='請輸入密碼'){
　　　　　　this.value='';
　　　　　　this.type='password';
　　　　};
　　};
　　input.onblur=function(){
　　　　if(!this.value){
　　　　　　this.type = 'text';
　　　　　　this.value = '請輸入密碼';
　　　　};
　　};
};

HTML代碼：

復(fù)制代碼代碼如下:

PS：這里再為大家推薦一款非常好用的JavaScript壓縮、格式化與加密工具，功能非常強(qiáng)大（對于想讓代碼加密的朋友不妨試試這里的js加密功能）：

JavaScript壓縮/格式化/加密工具：http://tools.jb51.net/code/jscompress

另外，上面這款js工具中的加密使用的是eval函數(shù)加密形式，對此本站還提供了如下這款針對eval函數(shù)加密的解密工具，非常強(qiáng)大實(shí)用！

js的eval方法在線加密解密工具：http://tools.jb51.net/password/evalencode

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

使用SpreadJS快速清除Excel中工作表保護(hù)密碼
這篇文章主要為大家介紹了使用SpreadJS快速清除Excel中工作表保護(hù)密碼方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
js 屏蔽鼠標(biāo)右鍵腳本附破解方法
用來屏蔽鼠標(biāo)右鍵的代碼，破解方法也比較簡單。比較根本。禁掉js什么也運(yùn)行不了。
2009-12-12
javascript實(shí)現(xiàn)下拉提示選擇框
這篇文章主要介紹了javascript實(shí)現(xiàn)下拉提示選擇框的相關(guān)資料,需要的朋友可以參考下
2015-12-12
Webpack學(xué)習(xí)之動態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學(xué)習(xí)之動態(tài)import原理及源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
JavaScript數(shù)組常用的增刪改查與其他屬性詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組常用的增刪改查與其他屬性的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
TypeScript中泛型的使用詳細(xì)講解
泛型程序設(shè)計(jì)(generic programming)是程序設(shè)計(jì)語言的一種風(fēng)格或范式,下面這篇文章主要給大家介紹了關(guān)于TypeScript中泛型使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
基于js實(shí)現(xiàn)抽紅包并分配代碼實(shí)例
這篇文章主要介紹了基于js實(shí)現(xiàn)抽紅包并分配代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JavaScript工廠模式詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式,結(jié)合完整實(shí)例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下
2021-10-10
PHP中如何unicode編碼，在JavaScript中h如何解碼
PHP中如何unicode編碼，在JavaScript中如何解碼？js中h這樣的，怎么轉(zhuǎn)碼？
2023-07-07
Webpack框架核心概念(知識點(diǎn)整理)
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。這篇文章主要介紹了Webpack框架核心概念(知識點(diǎn)整理),需要的朋友可以參考下
2017-12-12