IME入力時に@compositionstartと@compositionendで@inputを動作させない方法
131 回閲覧されました
みなさんこんにちは、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入力をしてない状態に戻ります。