# nautoc-password

> 使用文本输入框模拟密码输入框

Latest version **0.0.2** (published 2022-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install nautoc-password
pnpm add nautoc-password
yarn add nautoc-password
bun add nautoc-password
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-04-23 |
| First published | 2022-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 45.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | 翠林 |
| Maintainers | sisc |
| Keywords | password, new-password, autocomplete, input, HTMLInputElement |

## Links

- npm: https://www.npmjs.com/package/nautoc-password
- Repository: https://github.com/clinfc/nautoc-password
- Issues: https://github.com/clinfc/nautoc-password/issues
- npm.io page: https://npm.io/package/nautoc-password

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2022-04-23
- 0.0.1 — 2022-04-22

## 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
<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 类型

```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) 事件

---
_Source: https://npm.io/package/nautoc-password · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._