Setup

実装方法。

Step 1. input要素を用意する

かなをキャプチャするための input 要素と、出力するための input 要素を用意します。

<input type="text" id="input">
<input type="text" id="output">

Step 2. setupObserver

setupObserver 関数に先ほど用意した input 要素を渡し、監視を開始します。

const input = document.getElementById('input');
const output = document.getElementById('output');
KanaCapture.setupObserver(input, output);

Complete

以上で実装は完了です。
キャプチャする文字種を変更したり、出力する文字種を変更するなどカスタマイズが必要な場合は、カスタマイズを参照してください。