input type="email"で前後に半角スペース入力時の挙動がちょっと変

概要

<input type="email" />で、先頭や末尾に半角スペースを入力しても、内部的には半角スペースなしとして扱われている模様。

経緯

Vue.jsで、type="email"を指定したinput要素でv-model.trimしようとした。
しかし、画面上は半角スペース除去されなかった。
一方で、内部で保持している値には半角スペースが含まれていない様子だった。

Issue

だいぶ前にたっていた。
https://github.com/vuejs/vue/issues/5471

要約:

Chromeの仕様なので、Vueなしで再現できるよ

Issueたてるならそっちにたててね

EdgeやFirefoxでも再現したのでChromeというよりブラウザの仕様なのかな。

動かして確認

Issueに2つjsFiddleのサンプルが載っている。

自分が理解しやすいように2つめに以下を加え、いろいろ入力を試し、コンソールの出力を見て理解、納得した。

document.querySelector('input').addEventListener('input', (event) => {
  console.log(event.target.value)
})

仕様

The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.

仕様としてもあえてそうしているみたい。
画面上も変えてくれるとわかりやすいが、HTMLの仕様としてはそこまでやらない、と理解した。
ブラウザ側でよしなにやってくれてもいい気はするけども。

結論

バグではなく、HTML側(とその表示を実装するブラウザ側)の仕様。