paip.提升用户体验---显示密码控件ShowPwdController

paip.提升用户体验---显示密码控件ShowPwdController

作者Attilax ， 1466519819@qq.com

为了提升用户体验,需要需要将密码框显示成原文字符,由一个复选框来控制

我的思路是，页面一个密码框后边引用一个控件,  有一个的文本框和一个复选框，如果要显示原文，则将文本框显示、密码框隐藏

1.调用组件,因为我用的是ASP.NET技术,所以做了个ASCX控件来调用..如果是其它技术架构,请用相应的方法做控件....textBoxPwdName属性是

密码框的ID

<%@ Register src="ShowPwdController/ShowPwdController.ascx" tagname="ShowPwdController" tagprefix="uc1" %>
<uc1:ShowPwdController ID="ShowPwdController1" runat="server" textBoxPwdName="password" />

2.得到值 VALUE  ,spc就是JS引用组件的ID值

 //L101 apc
   var IShowPwdController=spc; //L101 spc
   if(IShowPwdController)
   pwdMD5Twice=spc.value();
  // alert(pwdMD5Twice);
   //end L101

3.ShowPwdController.ascx控件主内容如下

<!--show pwd conntroller start
  ati L101 pm
  -->
  <input style="WIDTH: 150px;display:none"
  οnkeydοwn="" id="passwordShowpwd" class="inputs" name="password" size="15"
   msg="" noflag="true" datatype="Require"  />
   <div  style=" margin-left:60px; margin-bottom:17px; margin-top:12px">
  <input name="checkboxShowpwd" type="checkbox" id="checkboxShowpwd" value="checkbox"   />

显示密码<script src="/loginPanelIndex/ShowPwdController/showpwd.js"></script><script  >
  var spc="";
      (function () {
          spc = new ShowPwdController();
          spc.textboxPwd = "<%=textBoxPwdName %>";
          spc.textboxPwd2 = "passwordShowpwd";
          spc.checkbox = "checkboxShowpwd";
          spc.ini();
          //alert();
      })();

      //alert("x"+spc);
 
  </script>
  </div><!--show pwd conntroller end -->

 

4.showpwd.js内容  ,一个ShowPwdController类...

/**
 * @author Administrator
 */
function ShowPwdController(){

    this.textboxPwd = "";
    this.textboxPwd2 = "";
    this.checkbox = "";
   
    var _textboxPwdDom = "";
    var _textboxPwd2Dom = "";
    var _checkDom;
    this.showPwd = function(){
   
        //this is checkbox
        if (_checkDom.checked) {
       
            _textboxPwdDom.style.display = "none";
            _textboxPwd2Dom.style.display = "";
            _textboxPwd2Dom.value = _textboxPwdDom.value;
        }
        else {
            _textboxPwdDom.style.display = "";
            _textboxPwd2Dom.style.display = "none";
            _textboxPwdDom.value = _textboxPwd2Dom.value;
        }
       
    }
    this.ini = function(){
        _checkDom = document.getElementById(this.checkbox);
        _checkDom.onclick = this.showPwd;
        _textboxPwdDom = document.getElementById(this.textboxPwd);
        _textboxPwd2Dom = document.getElementById(this.textboxPwd2);
    }
   
    this.value = function(){
        if (_checkDom.checked)
            return _textboxPwd2Dom.value;
        else
            return _textboxPwdDom.value;
    }
   
}