Vue.jsにて「keyup.enter」を使うとき、日本語変換時の確定ボタンで発火してしまいます。
今回はそんなときの対策をまとめてみました！
目次
【解決】Vue.js「keyup.enter」を日本語変換で発火させない方法
そんな日本語変換で発火させないサンプルがこちら↓
See the Pen vue 変換時のkeyup① by jito-coder (@jito-coder) on CodePen.
日本語変換をエンターキーで確定しても、発火せず表示されませんよね。
変換後、もう一度エンターキーを押すと発火して表示されます。
<script setup>
import { ref } from 'vue'
const toggleItem = ref(false)
const input = ref()
const inputEnter = ref()
// キーボードが押されたとき
function changeHandle() {
toggleItem.value = true
}
// エンターキーをクリック後
function enterHandle() {
if (toggleItem.value === false) {
return
}
inputEnter.value = input.value
toggleItem.value = false
}
</script>
<template>
<input type="text" v-model="input" v-on:keyup.enter="enterHandle" v-on:keypress="changeHandle">
<p>変換後のエンターキーで表示↓</p>
<p>{{ inputEnter }}</p>
</template>コードの中で重要な点がこちら↓
①：boolean値を示すリアクティブ変数を用意
②：キーボードをクリック時の関数用意
③：エンターキーをクリック後の関数用意
順に解説してきます。
まず「boolean」を示すようのリアクティブ変数を用意しておきます。
<script setup>
import { ref } from 'vue'
const toggleItem = ref(false)
</script>今回は例として「toggleItem」という変数を作り、初期値「false」にしておきました。
続いて「キーボードをクリック時に発火する関数」を用意します。
<template>
<input type="text" v-model="input" v-on:keypress="changeHandle">
~~~~
</template><script setup>
~~
// キーボードが押されたとき
function changeHandle() {
toggleItem.value = true
}
~~
</script>例として「changeHandle」という関数を作成。
キーボードが押されたら①で用意した「toggleItem」変数を「true」にしました。
つまり何かしらの印字可能な文字を入力したり、入力中の文字列を確定したときに発火。
そして変数の値が「true」になるということですね。
最後にエンターキーをクリック後に発火される関数を用意します。
<template>
<input type="text" v-model="input" v-on:keyup.enter="enterHandle" v-on:keypress="changeHandle">
~~~~
</template><script setup>
~~
// エンターキーをクリック後
function enterHandle() {
if (toggleItem.value === false) {
return
}
inputEnter.value = input.value
toggleItem.value = false
}
~~
</script>今回は例として「enterHandle」という関数を作成。
エンターキーを押し終わったあとに「toggleItem」の値が「true」だったら処理を続けるようなコードを書きます。
日本語変換が終わると「true」になるため、変換が終わった後のエンターキーのみで発火されるようになりました。
その後もう一度インプット欄を書き換える可能性を考えて、「toggleItem」の値を「false」にしておきます。
これで「keyup.enter」を日本語変換で発火させない処理が完成しました！
【解決】Vue.js「keyup.enter」を日本語変換で発火させない方法：まとめ
- boolean値を示すリアクティブ変数を用意
- 日本語変換が確定したらbooleanをtrueにする関数作成
- エンターキーを押し終わった後に、trueだったら処理を行う関数作成
「keyup.enter」を日本語変換で発火させたくない時はためしてみてね！
