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

那应该让你开始。但是，您的实现不会捕获用户在文本框中输入空格 (" ") 的情况。为此，您将使用trim 函数去除空格：

// 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 回答