paip.提升用户体验---显示密码控件ShowPwdController
作者Attilax ， 1466519819@
为了提升用户体验,需要需要将密码框显示成原文字符,由一个复选框来控制
我的思路是，页面一个密码框后边引用一个控件, 有一个的文本框和一个复选框，如果要显示原文，则将文本框显示、密码框隐藏
1.调用组件,因为我用的是技术,所以做了个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;
}
}
