首頁 > web前端 > js教程 > js實作input密碼框提示訊息的方法(附html5實作方法​​)_javascript技巧

js實作input密碼框提示訊息的方法(附html5實作方法​​)_javascript技巧

WBOY
發布: 2016-05-16 15:20:04
原創
1325 人瀏覽過

本文實例講述了js實作input密碼框提示訊息的方法。分享給大家參考,具體如下:

今天我們主管說要在密碼框加入個"請輸入密碼"的提示訊息,第一次的時候本來想著用修改input  type 屬性的方法呢,結果有某些特別的瀏覽器不支援,IE的input的type屬性是唯讀的,不能動態設定.所以換其它的方法,實例如下:

<input type="text" onfocus="changeTip(this);" id="passText" name="passText" value="请输入密码"/>
<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>
登入後複製

補充:

其實上面一大段的程式碼,用html5的一個 placeholder 屬性就解了.程式碼如下:

複製程式碼 代碼如下:

PS:這裡再為大家推薦一款非常好用的JavaScript壓縮、格式化與加密工具,功能非常強大(對於想讓程式碼加密的朋友不妨試試試試這裡的js加密功能):

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

另外,上面這款js工具中的加密使用的是eval函數加密形式,對此本站還提供瞭如下這款針對eval函數加密的解密工具,非常強大實用!

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

希望本文所述對大家JavaScript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板