Vueは友達
ホーム
>
Vue
>
IME入力時に@compositionstartと@compositionendで@inputを動作させない方法

IME入力時に@compositionstartと@compositionendで@inputを動作させない方法

IME入力時に@compositionstartと@compositionendで@inputを動作させない方法

12 回閲覧されました

みなさんこんにちは、jonioです。

今回はIME入力時に@inputを動作させない方法のメモになります。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

IME入力とは

全角文字の「k」と「ｉ」を入力したら変換一覧が表示されますが変換してくれるのがIMEです。

ちなみにIMEはInput Method Engineの略です。

vue.js3で下記の記述をしたとします。

<input
  @input="inputValidation"
/>


export default {
    setup(props) {
      const halfWidth = /^[\x00-\x7F]+$/;
      const inputValidation = (e) => {
        if (halfWidthRegex.test(e.target.value)) {
          alert('全角以外では入力できません。');
                  
          return;
        }    
      }
    }
    
    return {
      inputValidation
    }
}

フォームに「ａ」を入力すると「あ」に変換されるからアラートに引っかからないですが「き」を作りたくて「k」と「ｉ」と入力したら「k」を入力した時点で全角の文字になっていないのでアラートに引っかかります。

@compositionstartと@compositionend

これを使えばIME入力をした時に文字の変換をした後に@inputが動作します。

下記の記述に変えます。

<input
  @input="inputValidation"
  
  
  //ここから追加
  @compositionstart="isChanging = true"
  @compositionend="isChanging = false"
  //ここまで追加
  
  
/>


export default {
    setup(props) {
      const isChanging = ref(false);     //この行を追加
      const halfWidth = /^[\x00-\x7F]+$/;
      
      const inputValidation = (e) => {
        if (isChanging.value) return;     //この行を追加
        
        if (halfWidthRegex.test(e.target.value)) {
          alert('全角以外では入力できません。');
                  
          return;
        }    
      }
    }
    
    return {
      inputValidation,
      isChanging             //この行を追加
    }
}

isChangingの初期値をfalseに設定してフォームに値を入れてIME入力をしている間は6行目よりisChangingの値がtrueに変わります。

そして20行目より@inputの動作を止めてアラートに引っかからなくなります。

そしてIME入力が終わると7行目よりisChangingがfalseになってIME入力をしてない状態に戻ります。