Question

我在页面上输入了用户名和密码。首先，用于包装用户名字段的div带有橙色边框，在填充用户名后，它会变回白色，然后使用橙色边框突出显示用于包装密码输入的div。效果很好，但是当浏览器自动填充这些输入时，用户名边框会一直保持橙色，直到用户与页面进行交互为止。

我们尝试在页面加载时使用javascript读取字段中值的长度，但显然该值无法检测到浏览器生成的自动填充，用户至少必须先单击页面（任意位置），甚至单击鼠标右键）以更新该值。最后，我们得出的结论是，可以使用javascript通过查看元素的“占位符”属性来对所需元素进行样式设置。

这是我们用于清除边框的代码

var userteste = document.getElementById('userInputContainer');    
var passteste = document.getElementById('passwordInputContainer');

console.log(userteste.value); 
// At this point, the log will be an empty value, even though there is 
// a visible value filled in the input

if (userteste.value.length > 6 && passteste.value.length > 6) {
   $("." + 'userInputContainer').css({ border: "1px solid #FFF" });
   $("." + 'passwordInputContainer').css({ border: "1px solid #FFF" });
   var img = document.getElementById('userIcon');
   img.src = "/Content/Images/Ui/Login/LoginUserEscuro.svg";
   var img = document.getElementById('passwordIcon');
   img.src = "/Content/Images/Ui/Login/LoginLockEscuro.svg";
   $('.btn-login').removeAttr('disabled', 'disabled');
}

考虑到同时没有显示占位符，但是输入的“值”为空，我们如何使用JavaScript来检测元素的占位符可见性，而与它的值无关？

可能的答案： Detecting browser Autofill

这一个人说，浏览器自动填充输入时并没有真正触发事件，当我意识到这一点后，我决定尝试研究使用输入占位符解决方案的可能性。

我需要使用javascript

0 个答案: