0

Javascriptで簡単なパスワード確認スクリプトを作ろうとしています。私はJavascriptとWeb開発の初心者なので、どんな助けも役に立ちます.

2 つのテキスト入力 (最終的にはパスワード入力) を比較したいのですが、両方が等しい場合は、送信ボタンが有効になります。StackOverflow と W3 のチュートリアルを使用して、次のことを思いつきました。

<head>
<script>
function displayPass()
{
document.getElementById("complete").innerHTML="Password recorded.<br>Pass1 = " + document.getElementById("pass1").value + ".<br>Pass2 = " + document.getElementById("pass2").value + ".";
}
function checkpass()
{
    document.getElementById("pass1out").innerHTML = document.getElementById("pass1").value;
    document.getElementById("pass2out").innerHTML = document.getElementById("pass2").value;
    if(document.getElementById("pass1").value==document.getElementById("pass2").value){
        document.getElementById("subbutton").disabled = false;
    } else {
        document.getElementById("subbutton").disabled = true;
    }
}
</script>
</head>
<body>

<table border=0 cellpadding=0 cellspacing=5>
<tr><td>Password</td><td><input id="pass1" type=text onkeypress="checkpass()"></input></td><td id=pass1out></td></tr>
<tr><td>Confirm</td><td><input id="pass2" type=text onkeypress="checkpass()"></input></td><td id=pass2out></td></tr>
<tr><td></td><td><button type="button" id="subbutton" onclick="displayPass()" disabled>Submit</button></td></tr>
</table>
<p id="complete">&nbsp</p>
</body>

私が気付いたのは、checkpass() 関数のテキスト ボックスにある値が、テキスト ボックスの実際の値と一致しないことです。1文字後ろのようです。

ボタンを有効にして [送信] をクリックすると、displayPass() の値が正しく、テキスト ボックスの値と一致します。

Javascriptの使用法をさらに深く掘り下げているかどうかなど、単純なものが欠けているかどうかはわかりません。jQueryの使用を推奨する同様の投稿を見たことがありますが、まだjQueryを使用するまでには至っていません。

4

1 に答える 1

0

次のコードを使用して、必要な出力を取得できます。

<html>
<head>
<script>
function displayPass()
{
document.getElementById("complete").innerHTML="Password recorded.<br>Pass1 = " +      document.getElementById("pass1").value + ".<br>Pass2 = " + document.getElementById("pass2").value + ".";
}
function checkpass()
{
document.getElementById("pass1out").innerHTML = document.getElementById("pass1").value;
document.getElementById("pass2out").innerHTML = document.getElementById("pass2").value;
if(document.getElementById("pass1").value==document.getElementById("pass2").value){
    document.getElementById("subbutton").disabled = false;
} else {
    document.getElementById("subbutton").disabled = true;
}
}
</script>
</head>
<body>

<table border=0 cellpadding=0 cellspacing=5>
<tr><td>Password</td><td><input id="pass1" type=text onkeyup="checkpass()"></input></td><td id=pass1out></td></tr>
<tr><td>Confirm</td><td><input id="pass2" type=text onkeyup="checkpass()"></input></td><td id=pass2out></td></tr>
<tr><td></td><td><button type="button" id="subbutton" onclick="displayPass()" disabled>Submit</button></td></tr>
</table>
<p id="complete">&nbsp</p>
</body>
<html>

ユーザーは「keypress」ではなく「onkeyup」

于 2013-11-06T14:33:46.927 に答える