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

在设置密码时,会有密码输入框的显隐切换的需求,方便用户操作

第一种方式:
用的是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可以去掉)

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