Help us understand the problem. What is going on with this article?

Edge のテキストの×ボタン(クリアボタン)をVue.jsで検知できない

タイトルの通り。多分Vueを使っている方はご存じだろうが、一応載せておく。
解決案は微妙。こんな小手先の技ではなく、ブラウザか、Vueの中でどうにかしてほしい。

フォーム入力バインディング

Vueでは、v-modelを使うことによってinput要素とデータを双方向バインディングすることが出来る。便利。

フォーム入力バインディング(Vue公式ページ)
https://jp.vuejs.org/v2/guide/forms.html

  <input type="text" v-model="message">
  <p>message: {{ message }}</p>
data: {
    message: '',
},

image.png

Edgeのテキストの×ボタン

下の画像の×ボタン。このボタンを押下することでテキストの中身を一気にクリアすることが出来る。この機能自体は便利である。
image.png

しかし、見た目上は消されるのだが、Vue側の値が更新されない・・・。非常に困る。
image.png

解決案1:×ボタンを表示しない

CSSで::-ms-clearを非表示にする。臭いものに蓋を。
ただこれはクリア機能を制限しているだけであり、あまり良い解決案とは言えない。

input[type=text]::-ms-clear {
  display: none;
}

image.png

解決案2:フォーカスアウト時に入力されている値をチェックする

Vueではref属性を利用することで要素自体に直接アクセスすることが出来る。
これを使い、フォーカスアウト時に実際に入力されている値を直接取得することでVueの値も更新をかけることが出来る。
リアルタイムで入力値を反映させる必要が無いようなWebフォームでは有効だろう。
(例:ユーザに情報を入力させ、最後に保存をさせるような画面)

しかし、個人的にこの解決案は好きではない。仕方ないとはいえ要素に直接参照しに行く方法はVueの方針に合っていない(と思う)。綺麗でない。

  <input ref="text" type="text" v-model="message" @focusout="focusout">
  <p>message: {{ message }}</p>
methods: {
    focusout(){
        // $refs.textを取得し、更新
        this.message = this.$refs.text.value;
    },
},

×ボタン押下直後はまだ値が残っているが、、、
image.png

フォーカスアウト時には値を更新することが出来る。
image.png

打つ手なし・・・

この通り50点ぐらいの解決案しかない。こんな案で良ければご利用ください。
もし、もっと良い案あれば是非お待ちしております。

2019/09/17追記 コメントでもいただきましたが、どうしてもクリア機能が欲しいのなら自分でテキストエリアの横にクリアボタン作れば良いですね。ご参考までに。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away