JavaScript密码框实现（可切换）

 效果如图

这里主要是三个要点：

        1.input输入框的密码（password）和文本（text）的切换

        2.眼睛图片的点击切换

        3.输入时密码提示文字上移，失去失去焦点时下移

 部分代码如下：

        这是对网页内容的定义

      

        
        密码
      
      

    

       内容样式

接下来是重点！！！关于效果的书写，

 // 密码提示文字效果

      inputEle.addEventListener("focus", function () {

        labelEle.classList.add("active");

      });

      inputEle.addEventListener("blur", function () {

        if (inputEle == null) {

          labelEle.classList.remove("active");

        }

      });

       这里当输入框有焦点时，密码提示文字执行active的效果，在样式的.mi-control label.active中，当失去焦点且文本框为空时，移除active效果，恢复到最开始的样子

// 密码文字和眼睛图片切换

      miEle.addEventListener("click", function () {

        inputEle.type == "text";

        if (inputEle.type == "text") {

          inputEle.type = "password";

        } else {

          inputEle.type = "text";

        }

        miEle.classList.toggle("active");

      });

       这里当眼睛图片被点击，先把输入框的type属性赋值为text文本类型（因为默认是password类型，且眼睛图片最开始为闭眼），然后用if else，当为text文本型就赋值为password型，当为password型就赋值为text文本型，互相切换。

      miEle.classList.toggle("active");

classList.toggle——切换类名  如果有这个class类名，则删除，如果没有，则添加。实现眼睛的图片切换（其中active为.mi-password.active样式，里面存放了一个睁眼的图片）

完整代码如下

  
    
    
    
    
    
  

  
    

      

        
        密码
      
      

    
    
  

图片