くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

VueでINPUTがフォーカスイン/フォーカスアウトを判定する(@focusと@blur)

スマホ用にボトムナビゲーションをつけてみたけど、
INPUTのフォーカス時に邪魔なので、消したいなと。。
フォーカス中かどうかをは判定するために、いろいろ調べたときの備忘録

@focusと@blurでイベントを取得する

  • フォーカスすると、@focusが呼ばれ
  • フォーカスが外れると、@blurが呼ばれるらしい

それに合わせて、状態を変更してあげればOK(´ω`)

<template>
  <input type="text" @focus="isFocus = true" @blur="isFocus = false" />
</template>

<script>
import { Component, Vue, Prop } from "nuxt-property-decorator";

@Component
export default class FocusInput extends Vue {
  private isFocus: boolean = false;
}
</script>

以上!!

参考にしたサイト様