Customize

カスタマイズ方法。

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,
  },
);