0

私はさまざまな方法を試し、さまざまな場所を調べてきましたが、実際には次のコードが機能するようです。なぜそうでないのか、私は困惑しています...私はhtmlとJavaScriptの初心者なので、何か間違ったことを見落とし続けていると思いますか? もしそうなら、うまくいけば誰かがそれを指摘することができます。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!--
    function validateUsername() {
        if (document.getElementById("username") == "") {
           document.registrationform.username.style.background = 'Yellow';
        }
    }
//-->
</script>
</head>
<body>

<form name="registrationform" id="registrationform" method="post" action="register.php"> 

    <div class="formlabel">*Username:</div>
    <div class="formfield"><input type="text" name="username" id="username" size="30" onblur="validateUsername()"/></div>
    <div style="float:left;">
        <input type="submit" value="Submit" />
    </div>
</form>
</body>
</html>

空白のままにしてクリックすると、思い通りに色が変わりません。なんで？

4

3 に答える 3

2 
document.getElementById("username")

する必要があります

document.getElementById("username").value

これで始められるはずです。ただし、実装では、ユーザーがスペース (" ") をテキスト ボックスに入力した場合は検出されません。そのために、トリム関数を使用してスペースを取り除きます。

// Remove spaces at front/back of value in textbox
document.getElementById("username").value.trim();
于 2012-07-09T02:07:26.700 に答える
0

リスナーから要素への参照を渡すと、作業がずっと楽になります。

<input type="text" ... onblur="validateUsername(this)">

今あなたの機能は次のとおりです。

function validateUsername(element) {
    element.style.backgroundColor = (element.value == '')? 'yellow' : 'white';
}
于 2012-07-09T02:15:14.033 に答える
0

あなたのコードは少し面倒です。フォームタグの閉じ>"も抜けています。コードは次のようになります。

    <html>
<head>
<script type="text/javascript">
<!--
function validateUsername() {
if (document.getElementById("username").value == "") {
document.registrationform.username.style.background = 'Yellow';
}
}
//-->
</script>
</head>
<body>

<form name="registrationform" id="registrationform" method="post" action="register.php">

<div class="formlabel">*Username:</div>
<div class="formfield"><input type="text" name="username" id="username" size="30" onblur="validateUsername()"/></div>
<div style="float:left;">
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
于 2012-07-09T02:15:24.813 に答える