コード
実際にこのページに利用しているコードの実装例になります。
モジュールとしてimportした場合の実装です。
実際にこのページに利用しているコードの実装例になります。
<script type="module">
import * as KanaCapture from 'https://cdn.jsdelivr.net/npm/@shimoning/kana-capture@latest/dist/esm/index.js';
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('input')
const outputZenkakuKatakana = document.getElementById('output-zenkaku-katakana')
const outputHankakuKatakana = document.getElementById('output-hankaku-katakana')
const timingRealtime = document.getElementById('timing-realtime')
const timingEnter = document.getElementById('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>