https://github.com/clinfc/nautoc-password

劫持 text input 输入，模拟成 password input
https://github.com/clinfc/nautoc-password

autocomplete htmlinputelement input new-password password

Last synced: 8 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/clinfc/nautoc-password
• Owner: clinfc
• License: mit
• Created: 2022-04-21T14:19:34.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-04-23T05:45:45.000Z (over 2 years ago)
• Last Synced: 2024-10-31T03:32:29.369Z (18 days ago)
• Topics: autocomplete, htmlinputelement, input, new-password, password
• Language: TypeScript
• Homepage:
• Size: 12.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# nautoc-password

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

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

## 开始开始

### Node

#### 安装

```sh

npm i nautoc-password

```

#### 使用

```ts

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

```html

  const formData = {

    password: '123465',

  }

  const [config, bind] = nautocPassword({

    model: {

      get() {

        return formData.password

      },

      set(value) {

        formData.password = value

      },

    },

  })

  bind(document.querySelector('#password'))

```

## ts 类型

```ts

declare function nautocPassword(option: NAutocPasswordOption): NAutocPasswordReturn

```

完整的数据结构及注释请查看 [src/core/types.ts](./src/core/types.ts)。

## 兼容

1. 支持 [beforeinput](https://caniuse.com/?search=beforeinput) 事件

2. 支持 [compositionend](https://caniuse.com/?search=compositionend) 事件