密码输入框切换显示与隐藏

在设置密码时,会有密码输入框的显隐切换的需求,方便用户操作 第一种方式: 用的是element的输入框,比较简单,添加show-password即可

<el-input placeholder="请输入密码" v-model="input" show-password></el-input>

使用show-password属性即可得到一个可切换显示隐藏的密码框

第二种: 使用原生js实现

HTML代码:

<input  name="psd1" type="password" id="psd1" class="password1" placeholder="请输入密码" maxlength="10">
<input  name="psd2" type="text" id="psd2" class="password2" placeholder="请输入密码" maxlength="10">
<button id="togglePassword">切换</button>

css代码

.password2 {
          
   
      /* 初始状态下默认隐藏第二个输入框 */
        display: none;  
    }

JS代码:

// 切换两个输入框(切换显隐)
      $(#togglePassword).click(function () {
          
   
        if($(this).hasClass(open)) {
          
   
          $(#psd1).hide()
          $(#psd2).show()
          $(this).removeClass(open).addClass(close)
        } else {
          
   
          $(#psd1).show()
          $(#psd2).hide()
          $(this).removeClass(close).addClass(open)
        }
      })

      // 监听输入框的值,如果值发生变化,要保证两个输入框的值是一致的
      $(#psd1).change(function() {
          
   
        $(#psd2).val($(this).val())
      })
      $(#psd2).change(function() {
          
   
        $(#psd1).val($(this).val())
      })

输入框内可设置两个字体图标，一个为睁开的眼睛，一个为闭上的眼睛，用于点击切换两个input的显示(IE默认type为Passward的输入框有图标,通过css可以去掉)

在校验和提交时,处理其中一个输入框的值即可(因为两个输入框的值是一致的,避免代码冗余)