pwd-otp-box
v1.0.3
Published
说明:文本框模拟密码框脱敏, 解决小米等部分安卓手机的密码框安全键盘强制弹出造成页面无法滚动的情况
Downloads
6
Readme
cyq-fd
说明:文本框模拟密码框脱敏, 解决小米等部分安卓手机的密码框安全键盘强制弹出造成页面无法滚动的情况
| 方法名 | 参数 | 说明 | | -------------------| -----------------------------: | :----: | | FilterPassWord | domBox, oldPassWord, newPassWord, event |1.dom元素2.脱敏值3.无脱敏值4.$evnet| | FocusPassWord | domBox, indexs |1.dom元素 2.记录的光标位置 |
Example
<template>
<div>
<input type="text" v-model="oldPassWord" class="passWordBox" @keyup="keyUpChange($event)">
</div>
</template>
<script>
import { FilterPassWord, FocusPassWord } from 'pwd-otp-box'
export default {
data () {
return {
oldPassWord: '', // 显示脱敏后的密码
newPassWord: '', // 无脱敏密码
cursorDex: null // 记录光标位置
}
},
methods: {
keyUpChange (e) {
// 获取输入框dom
const passWordBox = document.querySelector('.passWordBox')
// 传入输入框dom,脱敏文本,无脱敏文本,$event对象
const datas = new FilterPassWord(passWordBox, this.oldPassWord, this.newPassWord, e)
// return出来的值分别赋值
this.oldPassWord = datas.oldPassWord
this.newPassWord = datas.newPassWord
this.cursorDex = datas.cursorDex
this.$nextTick(() => {
// 赋值完手动聚焦
new FocusPassWord(passWordBox, this.cursorDex)
})
}
}
}
</script>