テキストエリアで日本語入力を無効にする方法

Question

タイトルの通り、テキストエリアで日本語入力を無効にする方法が知りたいです。

event.preventDefault()を使って半角英数字の入力やEnter,deleteとうは問題なく無効化できるのですが、
入力モードが日本語の時のみ効かないです。

画像のように変換前の状態ですと効かないものなのでしょうか？

![

textarea(placeholder="入力テキスト"@keydown="onKey($event)")



private onKey(event) {
   if (this.showKeyboard === true) {　//自作の仮想キーボードが表示状態のみ
      　event.preventDefault();
   }
}

Answer 1

vueはともかくjsで判定するならこんな流れです

<textarea></textarea>
<script>
document.querySelector("textarea").addEventListener('input',(e)=>{
  const reg=/[^0-9a-z]/i;
  if(reg.test(e.target.value)){
    e.target.value=e.target.value.replace(reg,'');
  }
});
</script>

Comments

[NakaShun_1129]

回答ありがとうございます！
この方法で実装できました！

追加で一点質問なのですが、速いスピードでキーを連打するとreplaceの処理が間に合わず、文字が入力されてしまうことがあるのですが、これは回避可能なものでしょうか？

Answer 2

「半角文字以外が入力されたら削除する」という方法はあります。
正規表現利用にはなりますが、「半角文字かどうか」の正規表現は探せば出るので、試してみてください。

Comments

[NakaShun_1129]

回答ありがとうございます！
半角文字かどうかでreplaceする方法を採用しました。

追加で一点質問なのですが、速いスピードでキーを連打するとreplaceの処理が間に合わず、文字が入力されてしまうことがあるのですが、これは回避可能なものでしょうか？

[m.ts10806]

「今入力した文字」ではなく「エリア内全部」を対象にしてみてはどうでしょうか。