输入密码时大写锁定打开时的警告消息不起作用，并且仅在 google chrome 中无法识别初始比例

Question

我正在使用 JavaScript 函数来检查大写锁定是否打开以及在控制台上 window 我收到“未捕获的类型错误：无法读取属性 'addEventListener'无效的在 login.js:41"

在googlechrome的控制台window我也得到一个错误 "The key "初始比例"未被识别和忽略"

我试着寻找这个问题的原因，我看到有人说这可能是因为该函数在 DOM 运行之前执行，所以我尝试在该函数之前添加 window.onload 但它没有解决问题。

// array of objects to store adminstrators data 
var usersObj =[
    {
        username: "karim",
        password: "karim2019"
    },

    {    
        username: "nourhan",
        password: "noura2019"
    },

    {
        username: "nariman",
       password: "nariman2019"
    }
]

// function to authenticate login information and proceed to the next page 
function getLoginInfo()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    for(i = 0; i < usersObj.length; i++)
    {
        if(username == usersObj[i].username && password == usersObj[i].password)
        {
            alert("Login successful..");
            document.getElementById("loginf").action = "dashboard.html";
            return
        }
    }
    alert("Username or password is incorrect!");
    document.getElementById("loginf").action = "login.htm";
}

var input = document.getElementById("password");

var text = document.getElementById("text");
input.addEventListener("keyup", window.onload=function(event)
{
    if (event.getModifierState("CapsLock"))
    {
        text.style.visibility = "visible";
    } 
      else
    {
        text.style.visibility = "hidden"
    }
});

.row {
    margin-top: 5%;
}
/* Bordered form */
form {
    margin-top: 20%;
  }

  /* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 1% 2%;
    margin: 1%;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
  }
 p{
   display: none;
 }
  /* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 1% 2%;
    margin: 1%;
    border: none;
    cursor: pointer;
    width: 100%;
  }

  /* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
  }

  /* Add padding to containers */
.container {
    padding: 1.5%;
  }

  /* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 1.5%;
  }

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, intial-scale=1 maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="loginstyles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="login.js"></script>
    <body>
        <div class="row">
            <div class="col"></div>
            
            <div class="col">
                <form  id = "loginf" name="loginf" method="POST">
                    <div>
                        <h1>Account Login</h1>
                    </div>
                    <div><hr></div>

                    <div class="container">
                        <label for="username"><b>Username</b></label>
                        <input id="username" type="text" placeholder="Enter Username" name="username" required>
                    

                        <label for="password"><b>Password</b></label>
                        <input id="password" type="password" placeholder="Enter Password" name="password" required>
                        <p id="text">WARNING!Caps Lock is ON.</p>
                        
                        

                        
                        <label>
                            <input type="checkbox" checked="checked" name="remember">Remember me
                        </label>
                        <span class="psw"><a href="#">Forgot Password?</a></span>
                        <button onclick="getLoginInfo()" type="submit">Login</button>
                    </div>
                    
                   
                        
                </form>
            </div>

            <div class="col"></div>
        </div>
    </body>
</html>

Answer 1

我通过将事件监听器包装在一个函数中解决了这个问题，该函数在 window 加载

时运行

// array of objects to store adminstrators data 
var usersObj =[
    {
        username: "karim",
        password: "karim2019"
    },

    {    
        username: "nourhan",
        password: "noura2019"
    },

    {
        username: "nariman",
       password: "nariman2019"
    }
]

// function to authenticate login information and proceed to the next page 
function getLoginInfo()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    for(i = 0; i < usersObj.length; i++)
    {
        if(username == usersObj[i].username && password == usersObj[i].password)
        {
            alert("Login successful..");
            document.getElementById("loginf").action = "dashboard.html";
            return
        }
    }
    alert("Username or password is incorrect!");
    document.getElementById("loginf").action = "login.htm";
}


window.onload=function()
{
    var input = this.document.getElementById("password");
    var text = this.document.getElementById("text");
    input.addEventListener("keyup", function(event)
    {
        if(event.getModifierState("CapsLock"))
        {
            text.style.display = "block";
        }
        else
        {
            text.style.display = "none";
        }
    });
};

输入密码时大写锁定打开时的警告消息不起作用，并且仅在 google chrome 中无法识别初始比例

Warning message when caps lock is on while entering password is not working and also initial scale is not recognized in google chrome only

html

javascript

w3c