Question

我编写了一个函数，我希望它能检查文本字段是否为空，如果是，则应该将焦点重新放在上面。当用户离开文本字段时（模糊时），检查完成。不幸的是，代码无效。为什么会这样？我正在使用playframework。问题出在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>

Answer 1

我已经为你制作了这个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();
})();

Answer 2

来自Ibrahim的建议 - 你应该把firstName = document.get ...和firstName.addEve ...放在load事件监听器（setup function）中！任何与DOM有关的东西都必须等待DOM被加载

Javascript函数无法处理模糊事件

2 个答案: