- ひらがな デフォルト
- 全角カタカナ
- 半角カタカナ
Pattern 1. 出力する文字種を変更する
出力する文字種を以下に変更可能です。
第2引数をHTMLInputElementではなく、指定のオブジェクト型で渡すことで変更可能です。
KanaCapture.setupObserver(
input,
{
element: output,
type: KanaCapture.KanaType.Hiragana, // 省略可
},
);
または以下 (基本系)
KanaCapture.setupObserver(input, output);
KanaCapture.setupObserver(
input,
{
element: output,
type: KanaCapture.KanaType.ZenkakuKatakana,
},
);
KanaCapture.setupObserver(
input,
{
element: output,
type: KanaCapture.KanaType.HankakuKatakana,
},
);
Pattern 2. 複数箇所に出力する
第2引数を配列で渡すことで、複数箇所に出力することが可能です。
KanaCapture.setupObserver(
input,
[
output1,
output2,
output3,
],
);
出力する文字種は個別に指定が可能です。
KanaCapture.setupObserver(
input,
[
output1,
{ element: output2, type: KanaCapture.KanaType.ZenkakuKatakana },
{ element: output3, type: KanaCapture.KanaType.HankakuKatakana },
],
);
Pattern 3. 入力を受け付ける文字種を変更する
第3引数はオプションになっており、そこにcapturablePatternsを指定することで入力を受け付ける文字種を変更可能です。
デフォルトではひらがなのみを受け付けます。
- ひらがな デフォルト
- 句読点
- 伸ばし棒
- 鉤括弧
- 全角スペース
- 全角英字
- 全角数字
- 全角記号 (一部)
- 半角英字
- 半角数字
- 半角記号 (一部)
- 半角スペース
KanaCapture.setupObserver(
input,
output,
{
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,
],
},
);
Pattern 4. 出力するタイミングを変更する
第3引数はオプションになっており、そこにrealtimeまたはenterを指定することで出力を反映するタイミングを変更可能です。
デフォルトではrealtimeになっています。
それぞれの引数はbooleanもしくはHTMLInputElementで指定可能です。
両方をtrueやfalseにした場合、realtimeが優先されます。
HTMLInputElementを指定する場合は radio や checkbox などを指定してください。
KanaCapture.setupObserver(
input,
output,
{
enter: true, // Enterキーを押したときに反映
},
);
<input type="radio" id="realtime" checked>
<input type="radio" id="enter">
KanaCapture.setupObserver(
input,
output,
{
realtime: document.getElementById('realtime'),
enter: document.getElementById('enter'),
},
);
Pattern 5. 入力をクリアした時に出力もクリアする
第3引数はオプションになっており、そこにclearOnInputEmptyを指定することで、入力が何もなくなった時にエンターを押すことで出力もクリアすることが可能です。
デフォルトはfalseです。
KanaCapture.setupObserver(
input,
output,
{
clearOnInputEmpty: true,
},
);