はじめに

イラスト投稿サイトや動画投稿サイトなどでよく見かけるタグ入力…

暇だったのでなんとなく作ってみました。

出来たもの

See the Pen Tag Input by totoraj (@totoraj930) on CodePen.

ポイント

flexで楽をする

htmlを見ていただければわかると思いますがとてもシンプルな構造になっています。

タグと入力する場所(input)を単一のUIとして実装する場合、やはり問題になってくるのがinputの範囲指定です。

  1. タグがない状態では全体がinputになる
  2. 一定の範囲までならタグとinputを横並びで表示させる
  3. 一定の範囲を超えたら改行して下段全体をinputにする

といった実装を想定した場合flexが一番楽だと思います。

CSS側で指定することは

  • flex-wrap: wrapで改行させる
  • inputの親(li.tag-input-wrap)をflex: autoにして範囲を自動で最大にする
  • 同じく(li.tag-input-wrap)にmin-widthで最小サイズを指定する

といった具合に本当に少なくて済みます。

flex要素はmarginの相殺しがないので上と右だけにmarginを指定して親要素のpaddingの上と右をなくすなどで対応します。

スマホではkeypressが使えない

PCだけだとkeypressイベントを拾ってEnterだったら追加処理ってな感じで問題ないのですが、 スマホからだとkeypressイベントなどが発生しないのでsubmitイベントで代用します。


11/09: 追記

PCでkeypresskeydownでEnterを拾う場合event.keyを使って判定します。

keyupはfirefoxなどで日本語入力確定時にもEnterが出るのでkeypresskeydownを使います。

ブラウザごとに動作が違うので要検証です。

下記が参考になるかと思います。

Key Values - Web APIs | MDN


formの中にinputを配置することでsubmitイベントが発生するようになります。

submitイベントはformに対して発生します。

submitイベントをreturn falseでキャンセルすることでページ遷移を防ぐことができます。

このときにaddEventListener()return falseしてもキャンセルできません。

preventDefault()を使えばキャンセルできますが、onsubmitでリスナを単一登録してreturn falseでキャンセルする方が安全かなと思います。

おわりに

今回のサンプルだとタグをクリックすると消せることが初見だとわかりづらい。

特にスマホだと絶対わからないと思う。

無難に×ボタンを常時右端に表示するとかがいいとは思ったけどサンプルとして出すにはちょっと構造がややこしくなるのでやりませんでした。

flex強い!以上!