当前位置: 动力学知识库 > 问答 > 编程问答 >

php - How to have two password fields controlled by one checkbox?

问题描述:

<form>

<fieldset>

Password: <span id="capsalert">CAPS LOCK = on</span><br>

<input type="password" id="pwd">

<script type="text/javascript">

document.write(

'<input type="checkbox" name="masking" onclick="unmask(this.checked)"> ' +

'Show the password as I type'

);

</script>

<br>

Password2:<br>

<input type="password" id="pwd2">

</fieldset>

</form>

<script type="text/javascript">

function chkCaps(e) {

ev = (e ? e : window.event);

kc = (ev.which ? ev.which : (ev.keyCode ? ev.keyCode : false));

sk = (ev.shiftKey ? ev.shiftKey : (ev.modifiers ? !!(ev.modifiers & 4) : false));

if(

(kc >= 97 && kc <= 122 && sk) ||

(kc >= 65 && kc <= 90 && !sk)

) {

document.getElementById('capsalert').style.display = 'inline';

}

else {

document.getElementById('capsalert').style.display = 'none';

}//end if

}//end function

function unmask(truefalse) {

oldElem = document.getElementById('pwd');

elem = document.createElement('input');

elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));

elem.setAttribute('value', document.getElementById('pwd').value);

elem.id = 'pwd';

oldElem.parentNode.replaceChild(elem,oldElem);

document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); };

}//end function

document.getElementById('pwd').onkeypress = function(e) { chkCaps(e); };

</script>

I'm using the above code in a slightly more complex form.

I have two separate "password" fields on the form. With the current code I can have the first password field show the characters as they are typed when the checkbox is ticked.

Also, the code notifies the user if they are typing with CAPS Lock enabled.

I would like to have both password fields exhibiting the same behavior rather than the first field only. Unfortunately, I do not know how to make that happen.

Thanks for the help.

EDIT:

A simple solution might be easier to find with the following code. I'm willing to use either one.

<script>

function changeType()

{

document.myform.pass.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'password':'text';

}

</script>

<body>

<form name="myform">

<input type="password" name="pass" />

<input type="password" name="pass2" />

<input type="checkbox" name="option" value='1' onchange="changeType()" />

</form>

</body>

网友答案:

Why don't you just change the type attribute of the password inputs in your unmask() function? That way it will be easier for you to manage more than 1 field. After checking whether you have to turn the input into a text one or a password one, do this:

// Suppose 'new_type' is either 'text' or 'password'
// and that 'pwd' and 'pwd2' are the id attributes for
// both of your password fields
document.getElementById('pwd').type = new_type;
document.getElementById('pwd2').type = new_type;
网友答案:

I suggest changing your approach a bit.

You could modify the client with no impact to the server code. For example, I would try using 2 input boxes with the same name. If you ever have one box visible while the other one has the 'disabled' HTML attribute set, the visible box will always be the only one submitted.

This way, your server-side code would only have to look for 1 input, under a single name.

网友答案:

jQuery caps lock test/function? set both fields to class of password and:

jQuery('.password').caps(function(caps){
    if(jQuery.browser.safari) return; // Safari already indicates caps lock
    // "this" is current element
    if(caps){
        alert('Your caps lock is on!');
    }else{
        // no caps lock on
    }
});
网友答案:

Try this:

function chkCaps(e) {
    ev = (e ? e : window.event);
    kc = (ev.which ? ev.which : (ev.keyCode ? ev.keyCode : false));
    sk = (ev.shiftKey ? ev.shiftKey : (ev.modifiers ? !! (ev.modifiers & 4) : false));
    if ((kc >= 97 && kc <= 122 && sk) || (kc >= 65 && kc <= 90 && !sk)) {
        document.getElementById('capsalert').style.display = 'inline';
    } else {
        document.getElementById('capsalert').style.display = 'none';
    }
    //end if 
}
//end function 

function unmask(truefalse) {
    for (var f in new Array('pwd', 'pwd2')) {
        oldElem = document.getElementById(f);
        elem = document.createElement('input');
        elem.setAttribute('type', (truefalse == true ? 'text' : 'password'));
        elem.setAttribute('value', document.getElementById(f).value);
        elem.id = f;
        oldElem.parentNode.replaceChild(elem, oldElem);
        document.getElementById(f).onkeypress = function (e) {
            chkCaps(e);
        };
    }
}
//end function
document.getElementById('pwd').onkeypress = function (e) {
    chkCaps(e);
};
document.getElementById('pwd2').onkeypress = function (e) {
    chkCaps(e);
};

What this does is make it so your code works on pwd and pwd2 by repeating it for each element in the array new Array('pwd', 'pwd2').

网友答案:

Most of the answers didn't work. One or two I left untried because they meant greater changes to my code than I wanted. I ended up finding yet another method to reveal the passwords: "Show password as text" control
I adapted the method there to my multiple password fields scenario:

<input type="checkbox" onchange="document.getElementById('gpwd').type = this.checked ? 'text' : 'password'; document.getElementById('pwd1').type = this.checked ? 'text' : 'password'; document.getElementById('pwd2').type = this.checked ? 'text' : 'password'"> Reveal passwords
分享给朋友:
您可能感兴趣的文章:
随机阅读: