输入密码时启用大写锁定时的警告消息不起作用，并且初始缩放比例仅在Google Chrome中无法识别

Question

I am using a JavaScript function to check if caps lock is on and on the console window I get "Uncaught TypeError: Cannot read property 'addEventListener' of null at login.js:41" 我正在使用JavaScript函数检查大写锁定是否已打开，并且在控制台窗口上，我收到“ Uncaught TypeError：无法在login.js：41读取null的属性'addEventListener'”

In google chrome's console window I also get an error "The key "intial-scale" is not recognized and ignored" 在谷歌浏览器的控制台窗口中，我也收到错误消息“无法识别和忽略键“初始刻度”

I tried searching for the causes of this problem and I saw people saying that this may be because the function is executed before the DOM runs so I tried adding window.onload before the function but it didn't fix the issue. 我尝试寻找导致此问题的原因，我看到有人说这可能是因为该函数在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

I have fixed the issue by wrapping the eventlistener inside a function that runs when the window loads 我通过将eventlistener包装在窗口加载时运行的函数中来解决此问题

 // 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中无法识别

问题描述

1 个解决方案

解决方案1
0 2019-11-23 03:32:19

输入密码时启用大写锁定时的警告消息不起作用，并且初始缩放比例仅在Google Chrome中无法识别

问题描述

1 个解决方案

解决方案1 0 2019-11-23 03:32:19

解决方案1
0 2019-11-23 03:32:19