zoukankan      html  css  js  c++  java
  • js实现输入密码之延迟星号和点击按钮显示或隐藏

    缘由

    手机打开segmentfalut时,长时间不登陆了,提示要重新登陆,输入的过程中看到输入密码时,延迟后再变成密文,很好奇,所以捣鼓了一下。本文实现了两种密码展示

    代码实现

    1 先明后密

    js实现输入密码后,先显示当前输入的一位密码,然后再变成星号

    <input id="ipt" type="text" /><br>
    
    let val;
    var str = ""; // 中间层
    let ipt = document.getElementById('ipt');
    ipt.addEventListener('keyup', function () {
      val = this.value;
      if (val.length >= str.length) {
        str += val; // 存取
      } else {
        str = str.substr(0, val.length)
      }
      this.value = val.replace(/./g, "*")
    }, false)
    

    2 按钮显示隐藏密码

    这个方法是通过一个按钮去显示和隐藏输入后的密码

    <input id="pwd" type="password" /> <button>显示密码</button>
    
    let pwd = document.getElementById('pwd')
        let btn = document.querySelector('button')
        let flag = true; // 状态控制
        btn.onclick = function(){
          if(flag){
            btn.innerHTML = '隐藏密码'
            pwd.type = 'text'
            flag = false
          }else{
            btn.innerHTML = '显示密码'
            pwd.type = 'password'
            flag = true
          }
        }
    
  • 相关阅读:
    动画,缩放
    本地公司
    调研 公司信息
    外贸 内贸 经商
    情感 爱情 恋爱
    H5源码
    世界 生活
    标识
    Jackson
    java数据结构
  • 原文地址:https://www.cnblogs.com/sqh17/p/11345507.html
Copyright © 2011-2022 走看看