Skip to content

劫持 text input 输入,模拟成 password input

License

Notifications You must be signed in to change notification settings

clinfc/nautoc-password

Repository files navigation

nautoc-password

劫持 input[type=text]beforeinput 事件,将其模拟成 input[type=password],意在解决浏览器对密码框的自动填充行为。

nautoc-password 不依赖任何第三方库,纯原生,使用 TypeScript 构建,打包后的 umd 格式文件在 3.2kb 左右。

开始开始

Node

安装

npm i nautoc-password

使用

import nautocPassword, { NAutocPasswordOption } from 'nautoc-password'

// 保存密码
let password = ''

// 初始化配置
const option: NAutocPasswordOption = {
  model: {
    get() {
      return password
    },
    set(value) {
      password = value
    },
  },
  sign: 'x', // 密文显示时的替代字符。默认值:*。
  cleartext: true, // 设置为默认明文显示。false 则为密文显示。默认值:false。
  forceUpdateFocus: 'none', // sign 与 cleartext 动态更新后,或手动调用 forceUpdate 进行手动更新后,input 输入框的聚焦状态。默认值:end。
}

// 初始化。获取到具有双向绑定的配置对象和input节点绑定函数
const [config, bind] = nautocPassword(option)

// 生成一个 input 框
const input = document.createElement('input')
input.type = 'text'
document.body.append(input)

// 绑定 input 框
bind(input)

// 设置模拟的密码框为密文显示。会触发 input 框对内容进行实时更新。
config.cleartext = false

// 设置模拟的密码框密文显示时的替代字符。会触发 input 框对内容进行实时更新。
config.sign = '#'

// 在外部更改内容
password = '654321'
// 使用 api 将更改同步到 input 输入框中
config.forceUpdate()

CDN

<input type="text" id="password" />
<script src="https://cdn.jsdelivr.net/npm/nautoc-password@latest"></script>
<script>
  const formData = {
    password: '123465',
  }

  const [config, bind] = nautocPassword({
    model: {
      get() {
        return formData.password
      },
      set(value) {
        formData.password = value
      },
    },
  })

  bind(document.querySelector('#password'))
</script>

ts 类型

declare function nautocPassword(option: NAutocPasswordOption): NAutocPasswordReturn

完整的数据结构及注释请查看 src/core/types.ts

兼容

  1. 支持 beforeinput 事件
  2. 支持 compositionend 事件