首頁 > web前端 > js教程 > JS實作密碼框根據焦點的取得與失去控製文字的消失與顯示效果_javascript技巧

JS實作密碼框根據焦點的取得與失去控製文字的消失與顯示效果_javascript技巧

WBOY
發布: 2016-05-16 15:29:43
原創
1533 人瀏覽過

本文實例講述了JS實現密碼框根據焦點的獲取與失去控製文字的消失與顯示效果。分享給大家參考,具體如下:

思路:

1.先用密碼框用txt暫時取代,並賦上預設值
2.當文字方塊取得焦點後,把預設值清空,把type改為password。
3.當文字方塊失去焦點後,把type改為txt,把預設值設為「請輸入密碼」。

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程式碼

複製程式碼 程式碼如下:


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
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板