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