我一直在尝试不同的方法,并在许多不同的地方寻找,它看起来真的像以下代码应该工作。我很难过为什么它不...我是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>
当我把它留空并点击它时,它不会像我想的那样改变颜色。为什么呢?
答案 0 :(得分:2)
document.getElementById("username")
应该是
document.getElementById("username").value
这应该让你开始。但是,您的实现不会捕获用户在文本框中输入空格(“”)的情况。为此,您将使用trim function来删除空格:
// Remove spaces at front/back of value in textbox
document.getElementById("username").value.trim();
答案 1 :(得分:0)
如果从侦听器传递对元素的引用,则可以使生活更轻松:
<input type="text" ... onblur="validateUsername(this)">
现在你的职能是:
function validateUsername(element) {
element.style.backgroundColor = (element.value == '')? 'yellow' : 'white';
}
答案 2 :(得分:0)
你的代码有点乱。关闭“&gt;”表格标签也缺失了。 您的代码应如下所示。
<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>