JavaScript函数无法处理模糊事件

我已经写了一个函数，我希望应该检查一个文本字段是否为空，如果是，应该将焦点放回去。当用户离开文本字段（模糊）时，检查完成。不幸的是，代码无法正常工作。为什么这样？我正在使用playframework。这个问题是在JavaScript代码。JavaScript函数无法处理模糊事件

@(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>

来源

2017-02-25 Manu Chadha

你应该把'firstName = document.get ...'和'firstName.addEve ...'放在load事件监听器（'setup '功能）！ **任何与DOM有关的事务必须等待DOM加载**。 –

谢谢。有效。我注意到的一个特殊行为是，当我从“名字”字段移出而没有输入任何内容时，我会不断地收到警报消息，而不是只收到一次。我必须选择“阻止此页面创建新的框”来停止新的警报。为什么？ –

我认为'alert'对话框会从输入中获得焦点，所以每次都有一个警报弹出模糊事件被触发，另一个警报弹出......我不确定，但是您必须对此进行更多的研究！ –

建议的工作 - 你应该把的firstName = document.get ...和... firstName.addEve在加载事件监听器（setup函数）中！任何有DOM必须要等待DOM加载的东西

来源

2017-03-06 19:53:20

我做了这样的jsfiddle你（我采取了必要的代码来创建的例子，所以HTML，CSS和脚本是从你的不同一点点）。

，我认为它的行为，只要你愿意，）从易卜拉欣

https://jsfiddle.net/f039z59o/2/

(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(); 
})();

来源

2017-02-25 13:26:10

您的示例在jsfiddle中运行，但是当我完全评论了我的脚本并在

JavaScript函数无法处理模糊事件

回答

相关问题