browser-input-method/README.md

浏览器输入法。支持汉语拼音全拼输入、英文输入、手写输入。内置虚拟键盘，可选全键盘、手写、整数、数字、身份证键盘布局。

# Browser Input Method

浏览器输入法。支持汉语拼音全拼输入、英文输入、手写输入。内置虚拟键盘，可选全键盘、手写、整数、数字、身份证键盘布局。

理论上可用于任何 Web 前端技术栈的应用，但是由于使用了模型文件，需要自定考虑模型文件加载时间。

## 快速使用

### 安装

```shell
npm install browser-input-method
```

### 创建输入法管理器

使用默认参数创建的输入法管理器，可自动弹出和隐藏键盘。

```ts
import { InputMethodManager } from "browser-input-method";
import "browser-input-method/style.css";
import type {
  IHmmDict,
  IHmmStartDict,
  TDagDict,
  TPinyinDict,
} from "browser-input-method";
import handwritingOrtWasmPath from "browser-input-method/handwriting-input-method/ort.wasm";
import handwritingDict from "browser-input-method/handwriting-input-method/dict.json";
import handwritingModelPath from "browser-input-method/handwriting-input-method/model.onnx";
import charDict from "browser-input-method/pinyin-input-method/dag_char.json";
import phraseDict from "browser-input-method/pinyin-input-method/dag_phrase.json";
import pinyinDict from "browser-input-method/pinyin-input-method/hmm_py2hz.json";
import startDict from "browser-input-method/pinyin-input-method/hmm_start.json";
import emissionDict from "browser-input-method/pinyin-input-method/hmm_emission.json";
import transitionDict from "browser-input-method/pinyin-input-method/hmm_transition.json";

const imm = new InputMethodManager();

Promise.all([
  // 如果不使用拼音输入法，可以省略此处初始化
  imm.initPinyinInputMethod({
    charDict: charDict as unknown as TDagDict,
    phraseDict: phraseDict as unknown as TDagDict,
    pinyinDict: pinyinDict as unknown as TPinyinDict,
    startDict: startDict as unknown as IHmmStartDict,
    emissionDict: emissionDict as unknown as IHmmDict,
    transitionDict: transitionDict as unknown as IHmmDict,
  }),
  // 如果不使用手写输入法，可以省略此处初始化
  imm.initHandwritingInputMethod({
    ortWasmPath: handwritingOrtWasmPath,
    modelDataSource: handwritingModelPath,
    dict: handwritingDict,
  }),
])
  .then(() => {
    console.log("init successful.");
  })
  .catch((err) => {
    console.error(err);
  });
```

### 控制键盘的弹出和隐藏

在未明确指定是否托管键盘时，默认自动托管键盘弹出和隐藏。

```ts
const imm = new InputMethodManager({
  keyboardTrusteeship: false,
});

imm.showKeyboard();

imm.hideKeyboard();
```

### 指定支持的键盘

可以在创建输入法管理器实例时指定支持的输入法。

```ts
import { EInputMethod, InputMethodManager } from "browser-input-method";

const imm = new InputMethodManager({
  supportedInputMethods: [EInputMethod.PIN_YIN_FULL, EInputMethod.HANDWRITING],
});
```

也可以通过输入法管理器实例再次设置支持的输入法。

```ts
imm.setSupportedInputMethods([EInputMethod.INTEGER]);
```

不指定具体输入法时，默认支持全部输入法。

```ts
// 不传入任何参数
imm.setSupportedInputMethods();

// 或传入空列表
imm.setSupportedInputMethods([]);
```

### 控制切换输入法

```ts
imm.setInputMethod(EInputMethod.NUMBER);
```

### 控制键盘位置

在未明确指定键盘是否自动调整键盘位置时，默认自动调整键盘位置。

可以在创建输入法管理器实例时指定键盘位置。

```ts
const imm = new InputMethodManager({
  // 取消自动调整键盘位置
  autoAdjustKeyboardPosition: false,
  keyboardPosition: {
    x: 0,
    y: 0,
  },
});
```

也可以通过输入法管理器实例再次设置键盘位置。

```ts
imm.setKeyboardPosition({
  x: 0,
  y: 0,
});
```

### 控制键盘是否允许移动

在未明确指定键盘是否可移动时，默认键盘可以自由移动。

可以在创建输入法管理器实例时指定是否可移动键盘。

```ts
const imm = new InputMethodManager({
  keyboardMoveable: false,
});
```

也可以通过输入法管理器实例再次设置是否可移动键盘。

```ts
imm.setKeyboardMoveable(false);
```