時給単価UP【3大特典付き】
コーディングテクニック集100選⋙

【解決】Vue.js「keyup.enter」を日本語変換で発火させない方法

記事内に広告を含みます

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値を示すリアクティブ変数を用意

まず「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」を日本語変換で発火させたくない時はためしてみてね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA