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"

onkeydown="" 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;

}



}