669 回閲覧されました

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

今回はvue.jsの@compositionstart・@compositionendが何かを簡単なサンプルコードで解説します。

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

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

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

@compositionstart・@compositionendとは

@compositionstartはIME入力が始まったときに発火するイベントで@compositionendはIME入力が確定した時に発火するイベントです。

IME入力とは例えば全角の「k」→「i」の入力をしたら自動的に「き」や「気」などに変換できますがこれのことです。

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

だからIME入力開始と終了で発火するイベントだと分かったと思いますが用途が分からないと思うのでサンプルコードで解説します。

サンプルコード

用途ですが例えばIME入力を許可するフォームでIME入力が終わるまではバリデーションを動作させたくない時に使います。

@compositionstart・@compositionendを使った記述を見る前にまずは下記のコードを見ます。

<input
  @input="inputValidation"
/>


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

<input
  @input="inputValidation"
/>


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

この記述の場合はフォームに全角の「ａ」を入力すると「あ」に変換されるからアラートに引っかからないです。

でも「き」を作りたくて「k」と「ｉ」と入力しようとしたら「k」を入力した時点で11行目〜15行目が動作して全角の文字になっていないのでアラートに引っかかります。

こんな場合にIME入力中は@compositionstart・@compositionendを使って11行目〜15行目が動作しないようにします。

@compositionstart・@compositionendを使った記述

例えば下記の記述をします。

<input
  @input="inputValidation"
  @compositionstart="isChanging = true"  //この行を追加
  @compositionend="isChanging = false"  //この行を追加
/>

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

<input
  @input="inputValidation"
  @compositionstart="isChanging = true"  //この行を追加
  @compositionend="isChanging = false"  //この行を追加
/>

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

isChangingの初期値をfalseに設定します。

フォームに値を入れてIME入力をしている間は3行目よりisChangingの値がtrueに変わりIME入力中はバリデーション(15行目〜19行目)を止めます。

そしてIME入力が終わると4行目よりisChangingがfalseになってバリデーション(15行目〜19行目)が動作します。

これでIME入力をした時のバリデーションを実装できます。