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

Accessing variable in javascript after onpaste event

本文关键字：变量 javascript 访问 onpaste 事件      更新时间：2023-09-26
<!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)语句确实被执行，并弹出一个值为 0 的警报框。

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

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

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

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

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

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

小提琴

相关文章：