时间戳

首页 > 解决方案 > JavaScript : 短时间显示密码

javascript - JavaScript : 短时间显示密码

问题描述

我想在 javascript 中切换密码可见性。但我希望它以这样一种方式出现，即当用户仅单击一次眼睛图标时，密码可见性会像闪光一样出现并恢复为不可见（即以点表示法）。尝试在 Windows 10 中查看 wi-fi 密码时实现了此机制。我想对 javascript 使用相同的技术，但我已经被这个问题困扰了一段时间。免责声明：我现在正在学习 javascript 中的事件类型，请提供初学者友好的解决方案。 提前致谢。

HTML 代码

<input type="password">
        <i class="far fa-eye"></i>

JavaScript 代码

let inputObj = document.querySelector("input");
let iObj = document.querySelector("i");

    iObj.addEventListener("click",function(){
       inputObj.type = (inputObj.type==="password") ? "text" : "password";
        iObj.classList.toggle("fa-eye-slash");  
    })

标签： javascripteventspasswordsvisibility

解决方案

您可以尝试使用setTimeout()功能。以下是你如何使用它： setTimeout(callback, timeout-in-ms)

这是它的样子：

    iObj.addEventListener("click",function(){
       inputObj.type = "text";
       iObj.classList.toggle("fa-eye-slash");  

       setTimeout(() =>
         inputObj.type = "password";
         iObj.classList.toggle("fa-eye-slash");   

         // Let's say timeout for 2 seconds
       }, 2000)
    })

推荐阅读