# 快速导航

# 实例效果

# 具体实现

点击即可查看代码

html 代码

<input :type="type" name="pass" v-model="inputVal" />
<button @click="switchPass">{{ type==="password" ? "隐藏密码":"显示密码"}}</button>
1
2

css 代码

input {
  border: #cccccc 1px solid;
  background-color: #fff;
  color: #666;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

button {
  width: 30%;
  background: #42b983;
  outline: none;
  color: #fff;
  border: none;
  cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

js 代码

export default {
  name: 'inputPassword',
  data() {
    return {
      type: 'password', // 通过切换input的type类型即可进行切换
      inputVal: '123456',
      onOff: true,
    };
  },

  methods: {
    switchPass() {
      if (this.onOff) {
        // 这里是核心切换密码的显示与隐藏代码
        this.type = 'password';
      } else {
        this.type = 'text';
      }
      this.onOff = !this.onOff;
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 原生实现

点击即可查看代码
<input type="password" name="pass" id="pwd" />
<span state="off" id="iState" onclick="showPassWord()">隐藏密码</span>
1
2

js

function showPassWord() {
  var iState = document.getElementById('iState'); // 获取元素
  var spanText = iState.innerText; // 获取span元素内的文本
  var pwd = document.getElementById('pwd'); // 获取input元素
  var state = iState.getAttribute('state'); // 获取span元素的state的属性
  if (state === 'off') {
    //根据属性判断
    pwd.setAttribute('type', 'text'); // 设置input,type属性
    iState.setAttribute('state', 'on');
    spanText = '隐藏密码';
  } else {
    pwd.setAttribute('type', 'password'); // 密码框
    iState.setAttribute('state', 'off');
    spanText = '显示密码';
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 总结

这个span的作用主要是用于用户两次点击效果的判断. 点击第一次, 密码显示; 点击第二次, 密码隐藏. 重复这样的动作. 利用这个state 来查看其状态.

重点就在于, 修改 inputtype 属性, 显示的时候 typetext, 隐藏的时候是password.

无论jQ,Vue,React,最终处理的逻辑都差不多

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐