js實(shí)現(xiàn)input密碼框提示信息的方法(附html5實(shí)現(xiàn)方法)

更新時(shí)間：2016年01月14日 11:21:36 作者：乘著風(fēng)在飛

這篇文章主要介紹了js實(shí)現(xiàn)input密碼框提示信息的方法,涉及JavaScript頁(yè)面元素的獲取,屬性判斷及樣式設(shè)置等技巧,并附帶html5的相關(guān)實(shí)現(xiàn)方法,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)input密碼框提示信息的方法。分享給大家供大家參考，具體如下：

今天我們主管說(shuō)要在密碼框加入個(gè)"請(qǐng)輸入密碼"的提示信息,第一次的時(shí)候本來(lái)想著用修改input type 屬性的方法呢,結(jié)果有某些特別的瀏覽器不支持,IE的input的type屬性是只讀的,不能動(dòng)態(tài)設(shè)置.所以換其它的方法,實(shí)例如下:

<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="請(qǐng)輸入密碼"/>
<input style="display: none;" type="password" onblur="changeTip(this);" id="pass" placeholder="" name="pass" value=""/>
<script type="text/javascript">
function changeTip(th){
 var passText = document.getElementById('passText');
 var pass = document.getElementById('pass');
 if(th.id == 'pass'){
  if(th.value == '' || th.value.length == 0 ){
   passText.style.display='';
   pass.style.display='none';
  }
 }else{
  passText.style.display='none';
  pass.style.display='';
  pass.focus();
 }
}
</script>

補(bǔ)充：

其實(shí)上面一大段的代碼,用html5的一個(gè) placeholder 屬性就解決了.代碼如下:

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

<input type="password" id="pass5" placeholder="請(qǐng)輸入密碼" name="pass5" value=""/>

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

uni-app封裝組件實(shí)現(xiàn)下方滑動(dòng)彈出模態(tài)框效果
這篇文章主要介紹了uni-app封裝組件實(shí)現(xiàn)下方滑動(dòng)彈出模態(tài)框效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-08-08
Javascript實(shí)現(xiàn)的CSS代碼高亮顯示
到網(wǎng)上一位別出心裁的高手使用字符串而不是正則表達(dá)式實(shí)現(xiàn)了Javascript代碼高亮顯示，自己受益匪淺，于是就構(gòu)思了CSS代碼的高亮顯示。
2009-11-11
js如何在字符串中查找某個(gè)字符的位置
這篇文章主要給大家介紹了關(guān)于js如何在字符串中查找某個(gè)字符的位置的相關(guān)資料,在JavaScript中我們經(jīng)常需要對(duì)字符串進(jìn)行各種操作,包括查找包含特定字符的字符串,需要的朋友可以參考下
2023-11-11
js添加select下默認(rèn)的option的value和text的方法
這篇文章主要介紹了js中創(chuàng)建html標(biāo)簽、添加select下默認(rèn)的option的value和text，很實(shí)用，需要的朋友可以看看
2014-10-10
有趣的script標(biāo)簽用getAttribute方法來(lái)自腳本吧
有趣的script標(biāo)簽用getAttribute方法來(lái)自腳本吧...
2007-03-03
Phaser.js實(shí)現(xiàn)簡(jiǎn)單的跑酷游戲附源碼下載
這篇文章主要介紹了Phaser.js實(shí)現(xiàn)簡(jiǎn)單的跑酷游戲附源碼下載,需要的朋友可以參考下
2018-10-10
輕松掌握J(rèn)avaScript狀態(tài)模式
這篇文章主要幫助大家輕松掌握J(rèn)avaScript狀態(tài)模式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
JavaScript中實(shí)現(xiàn)數(shù)組分組功能的方法詳解
最近,JavaScript引入了一個(gè)備受期待的功能：原生支持?jǐn)?shù)組分組,這一特性使得在處理復(fù)雜的數(shù)據(jù)集時(shí)變得更加簡(jiǎn)單和高效,本文將深入探討這一全新的JavaScript特性,希望對(duì)大家有所幫助
2023-12-12
禁止js文件緩存的代碼
禁止js文件緩存問(wèn)題是我一直遇到的大問(wèn)題，終于找到了一個(gè)比較好的辦法
2010-04-04
調(diào)試Node.JS的輔助工具(NodeWatcher)
Node.JS調(diào)試貌似比較麻煩,每次改完了要重啟一下Node進(jìn)程.GOOGLE上有個(gè)NPM模塊,可以監(jiān)控JS文件的更改,然后自動(dòng)重啟Node.但我下載后在windows里運(yùn)行報(bào)錯(cuò)
2012-01-01