0 
<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>

上記のコードをもう少し複雑な形式で使用しています。

フォームに 2 つの個別の「パスワード」フィールドがあります。現在のコードでは、チェックボックスにチェックを入れたときに入力された文字を最初のパスワード フィールドに表示することができます。

また、CAPS Lock が有効な状態で入力している場合、コードはユーザーに通知します。

最初のフィールドのみではなく、両方のパスワード フィールドが同じ動作を示すようにしたいと考えています。残念ながら、私はそれを実現する方法を知りません。

助けてくれてありがとう。

編集:
次のコードを使用すると、簡単な解決策を簡単に見つけることができます。私はどちらかを使用するつもりです。 

<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>
4

5 に答える 5

0

アプローチを少し変えることをお勧めします。

サーバー コードに影響を与えずにクライアントを変更できます。たとえば、同じ名前の 2 つの入力ボックスを使用してみます。1 つのボックスが表示され、もう 1 つのボックスに HTML 属性が「無効」に設定されている場合、表示されているボックスは常に送信される唯一のボックスになります。

このように、サーバー側のコードは、1 つの名前で 1 つの入力を探すだけで済みます。

于 2010-12-20T16:34:12.903 に答える
0

これを試して：

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);
};

これが行うことは、コードが機能するようにpwdしpwd2、配列内の各要素に対して繰り返すことですnew Array('pwd', 'pwd2')。

于 2010-12-20T16:35:40.820 に答える
0

ほとんどの答えはうまくいきませんでした。1 つか 2 つは、コードに必要以上の変更を加えることになるため、試してみませんでした。私はパスワードを明らかにするためのさらに別の方法を見つけることになりました：「パスワードをテキストとして表示」コントロール
私はその方法を私の複数のパスワードフィールドシナリオに適応させました：

<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
于 2010-12-20T21:44:57.357 に答える
0

type関数のパスワード入力の属性を変更してみませんunmask()か? そうすれば、複数のフィールドを簡単に管理できます。を 1 にする必要があるか 1inputにする必要があるかを確認したら、次のようにします。textpassword

// 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;
于 2010-12-20T16:31:56.457 に答える
0

jQueryキャップロックテスト/機能? 両方のフィールドをパスワードのクラスに設定し、次のようにします。

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
    }
});
于 2010-12-20T16:36:36.643 に答える