Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit Form</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
    <script src="domready.js"></script>
    <script>
    DomReady.ready(function() {
        (function () {
            var Username =document.getElementById("Username").onpaste = function() {username()};
            alert(Username.length);

            var Password = document.getElementById("Password").onpaste = function() {validate()};
            var DOB = document.getElementById("DOB").onpaste = function() {validate()};
            var Email = document.getElementById("Email").onpaste = function() {validate()};
            var Country = document.getElementById("Country").onpaste = function() {validate()};

            function validate(){
                setTimeout(username, 3000);
            }

            function username(Username){
                /*if(Username.value <= 5){*/
                    alert(Username.length); 
            }

        })();
    });
    </script>
</head>
<body>
    <div id="wrp">
        <form action="">
            <div>
                <label for="Username">Username</label>
                <input type="text" id="Username">
            </div>
            <div>
                <label for="Password">Password</label>
                <input type="password" id="Password">
            </div>
            <div>
                <label for="DOB">Date of birth</label>
                <input type="text" id="DOB">
            </div>
            <div id="wrp-gender">
                <label for="Gender" id="Gender">Gender</label>
                <div id="wrp-radio-btn">
                    <label for="Male">Male</label>
                    <input type="radio">

                    <label for="Female">Female</label>
                    <input type="radio">
                </div>
            </div>
            <div>
                <label for="Email">Email</label>
                <input type="text" id="Email">
            </div>
            <div>
                <label for="Country">Country</label>
                <input type="text" id="Country">
            </div>
            <div>
                <input type="submit" value="Submit" id="Submit">
            </div>
        </form>
    </div>
</body>
</html>

alert(Username.length)语句确实已执行＆amp;弹出一个警告框，其值为0.

当我在输入框中输入值时，为什么变量Username的值为null或0？

Answer 1

当我使用jQuery的粘贴事件时，我看到了类似的东西。

它是一个奇怪的，我认为粘贴事件在文本实际粘贴到输入之前触发。

我能够使用setTimeout将其推送到事件队列的末尾

var Username = document.getElementById("Username");
Username.onpaste = username;


function username(){
    setTimeout(function(){
            alert(Username.value.length);      
     });
  }

<强> fiddle

在onpaste事件后访问javascript中的变量

1 个答案: