v-modelのIME入力ホットスポットとカスタム入力マスク

ライブラリを使用せずにinput maskingを実装すると、キーボード入力でv-model値をすぐに更新できないという問題が発生しました.
問題を発見する前に:v-modelとkeyupを使用してマスクを実現H:MM:SSフォーマットのマスクが必要であるため、keyupイベントが発生した場合、現在の値のフォーマットで:を貼り付け、数字やコロンでなければ入力を復元することで実現する.

<!-- template -->
<input type="text" v-model="hour" maxlength="7" placeholder="H:MM:SS" @keyup="maskingInput"/>

//script
maskingInput(event: KeyboardEvent): void {
  if (event.key !== "Backspace") {
    if(this.hour) {
      if(!this.hour.match(/[0-9:]/g)) this.hour = '';
      if(this.hour.match(/^\d{1]$/)) this.hour += ':';
      if(this.hour.match(/^\d{1}:\d{2}$/)) this.hour += ':';
    }
  }
}

しかし、ハングル入力時にv-modelが更新されなかったため、実現できなかった.
調べてみると、正式な書類のIME入力方式、すなわちハングル、日本語、中国語などの文字の組み合わせ方式の言語であり、IME合成中にv-modelの更新は発生しない.逆に、Inputアクティビティを利用して、すぐに価値を提供することをお勧めします.
コンパイル発生時にもkeyup/downイベントが発生するので、maskingInput()をそのままkeyupに使用しますが、inputリスナーを追加するだけでOKです.
2回目の試み:すぐにinputリスナーでvalueを更新しますが、keyupで関数を使用します.
++変化する部分
1) this.時間の値に基づいてフォーマットに合致するかどうかを決定します.
key値を使用して判断し、値を予め空の文字に更新する
2)コロンの貼り付け方を文字数によって数字入力時にbackspaceにコロンを削除するときにコロンを真ん中に置くように変更し、

<!-- template -->
<input type="text" :value="hour" maxlength="7" placeholder="H:MM:SS" @input="updateInput" @keyup="maskingInput"/>

//script
updateInput(event: InputEvnet): void {
  const inputNode = event.target;
  this.hour = inputNode.value;
},
maskingInput(event: KeyboardEvent): void {
  if (!event.key.match(/[0-9:]/g)) this.hour = "";
  else {
    const masked = this.hour.replace(/:/g, "");
    if (this.hour.length === 3) this.hour = masked.slice(0, 1) + ":" + masked.slice(1);
...
  }
}

これによりコンパイル中にinputに直接値を適用することもできるが,クロム上でinputイベントが2回発生する問題(safariが正常に動作する)が見つかった.
必要な値を超えた値を入力し、時間値を再初期化して再入力すると、前に入力した値と前に入力した値、コンパイル中の値の2つのイベントが発生します.

さらにしばらくすると、inputイベントだけでなく、inputタグで発生する他のイベントもIME方式で2回発生するようです.文字入力後に入力ウィンドウを離れて再入力すると、一度だけ表示されますが、まだ完全な解決策はないようです.関連する問題
前回の試み:クロム応答
上記の問題により、クロムから値を削除して数字を加えると、以前にコンパイルした値+数字で、現在のキーの値からフォーマットに合致するか否かを判断するロジックが正常に動作しない.
したがって,フォーマットに適合する鍵を入力する場合も,以前にコンパイルした値を再度削除する必要がある.

//script
maskingInput(event: KeyboardEvent): void {
   if (!event.key.match(/[0-9:]/g)) ...
   else {
    this.hour = this.hour.replace(/[^0-9:]/g, '');
    ...
   }
}

最後に、59(分/秒)の処理のみを受け入れることはinput maskの役割とは考えにくく、入力は99には受け付けず、apiが発行される前に確認するように処理する.
完成の様子

n/a.結論
1)IME方式のv-modelが正常に動作しない場合はinputイベントに直接更新してください
2)IMEメソッドは,入力中のイベントが重複しているため応答を要求する(Chromeのみ)