Javascript函数无法处理模糊事件
我已经编写了一个函数，我希望它能够检查文本字段是否为空，如果为空，那么应该将焦点放回文本字段上。当用户离开模糊上的文本字段时，将完成检查。不幸的是，代码不起作用。为什么会这样？我正在使用playframework。问题在于Javascript代码Javascript函数无法处理模糊事件,javascript,dom-events,Javascript,Dom Events,我已经编写了一个函数，我希望它能够检查文本字段是否为空，如果为空，那么应该将焦点放回文本字段上。当用户离开模糊上的文本字段时，将完成检查。不幸的是，代码不起作用。为什么会这样？我正在使用playframework。问题在于Javascript代码 @(form:Form[User2]) <!DOCTYPE html> <html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml&
@(form:Form[User2])
<!DOCTYPE html>
<html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Test</title>
<link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/bootstrap.min.css")">
<!--link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css"-->
<style type="text/css">
html, body{height:100%; margin:0;padding:0}
<!-- this centers the texts fields -->
.center-form {
width:100%;
margin:auto;
position:relative;
top:50%;
transform: translateY(-50%)
}
</style>
<script>
/*this function works fine and puts the text cursor on first text field*/
function setup(){
var textInput;
textInput = document.getElementById('first-name');
textInput.focus();
}
var firstName;
firstName = document.getElementById('first-name');
/*the problem is in this code. I check if the field is empty and if so, I call focus to put focus on that field*/
function validateFirstName(){
var name = firstName.value;
if (name.length <= 0) {
alert("error");
firstName.focus();
}
}
window.addEventListener('load',setup,false);
firstName.addEventListener('blur',validateFirstName,false);
</script>
</head>
<body>
<div class="container center-form" >
<!-- for medium and large screens,
First row of Bootstrap grid contains logo. Total 3 columns (12/4). Logo in middle column-->
<div class="row" >
<!--empty column-->
<div class="col-md-4 col-lg-4" ></div>
<!--logo column-->
<!--div class="col-md-4 col-lg-4" >
<div>
<img src="@routes.Assets.at("images/somelogo.png")" alt="Logo" height="64" width="303">
</div>
</div-->
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
</div>
<!-- for medium and large screens,
Second row of Bootstrap grid contains the form for username and password. Total 3 columns (12/4). -->
<div class="row" >
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
<!--form-->
<div class="col-md-4 col-lg-4">
<form onsubmit='return onSubmit(this)'>
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" value="@form("name").value" required>
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" value="@form("name").value" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="@form("email").value" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm password</label>
<input type="password" class="form-control" id="confirm-password" required>
</div>
<div class="form-group">
<label for="street-name">Street Name</label>
<input type="text" class="form-control" id="street-name" required>
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" required>
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
<!--empty column-->
<div class="col-md-4 col-lg-4"></div>
</div>
</div>
<!--script src="@routes.Assets.at("javascripts/jquery-1.9.0.min")"></script-->
<!--script src="@routes.Assets.at("javascripts/bootstrap.min.js")"></script-->
</body>
</html>
我为您制作了这个JSFIDLE，我使用了创建示例所需的代码，因此html、css和脚本与您的略有不同 我认为它的行为符合你的意愿
Ibrahim的建议奏效了-你应该把firstName=document.get。。。还有名字。加上。。。在load event listener设置函数中！任何与DOM有关的内容都必须等待DOM加载您应该将firstName=document.get。。。还有名字。加上。。。在load event listener设置函数中！任何与DOM有关的内容都必须等待DOM加载。谢谢。成功了。我注意到的一个奇怪的行为是，当我从“名字”字段移出时，没有键入任何内容，我会连续收到警告消息，而不是只收到一次。我必须选择“阻止此页面创建新框”以停止新警报。为什么？我认为警报对话框会从输入中获取焦点，因此每次警报弹出时，就会触发模糊事件，并弹出另一个警报。。。不过我不确定，你得做更多的研究！您的示例在JSFIDLE中工作，但当我完整地注释了我的脚本并替换为您的内部标记时，不幸的是，它没有工作。。。我很抱歉！你最终找到解决办法了吗？
(function() {
var name = document.getElementById('first-name');
function setup() {
name.select();
}
function validateFirstName() {
if (name.value.length < 1) {
name.select();
}
}
document.addEventListener('ready', setup, false);
name.addEventListener('blur', validateFirstName, false);
setup();
})();