コード
実際にこのページに利用しているコードの実装例になります。
通常のJavaScriptファイルとしてグローバルに読み込んだ場合の実装です。
実際にこのページに利用しているコードの実装例になります。
<script src="https://cdn.jsdelivr.net/npm/@shimoning/kana-capture@latest/dist/umd/index.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('#input')
const outputZenkakuKatakana = document.querySelector('#output-zenkaku-katakana')
const outputHankakuKatakana = document.querySelector('#output-hankaku-katakana')
const timingRealtime = document.querySelector('#timing-realtime')
const timingEnter = document.querySelector('#timing-enter')
KanaCapture.setupObserver(
input,
[
'#output-hiragana',
{ element: outputZenkakuKatakana, type: KanaCapture.KanaType.ZenkakuKatakana },
{ element: outputHankakuKatakana, type: KanaCapture.KanaType.HankakuKatakana },
],
{
observeInterval: 30,
debug: false,
realtime: timingRealtime,
enter: timingEnter,
clearOnInputEmpty: true,
capturablePatterns: [
KanaCapture.CapturableCharacterType.HIRAGANA,
KanaCapture.CapturableCharacterType.KUTOUTEN,
KanaCapture.CapturableCharacterType.CHOUON,
KanaCapture.CapturableCharacterType.KAGIKAKKO,
KanaCapture.CapturableCharacterType.ZENKAKU_SPACE,
// 全角英数字記号
// KanaCapture.CapturableCharacterType.ZENKAKU_ALPHABET,
// KanaCapture.CapturableCharacterType.ZENKAKU_NUMBER,
// KanaCapture.CapturableCharacterType.ZENKAKU_1BYTE_SYMBOL,
// 半角英数字記号 + 半角スペース
// KanaCapture.CapturableCharacterType.HANKAKU_SPACE,
// KanaCapture.CapturableCharacterType.HANKAKU_ALPHABET,
// KanaCapture.CapturableCharacterType.HANKAKU_NUMBER,
// KanaCapture.CapturableCharacterType.HANKAKU_1BYTE_SYMBOL,
],
},
)
})
</script>