はじめに
イラスト投稿サイトや動画投稿サイトなどでよく見かけるタグ入力…
暇だったのでなんとなく作ってみました。
出来たもの
https://codepen.io/totoraj930/pen/gQPJbM/
ポイント
flex で楽をする
html を見ていただければわかると思いますがとてもシンプルな構造になっています。
タグと入力する場所(input)を単一の UI として実装する場合、やはり問題になってくるのが input の範囲指定です。
- タグがない状態では全体が input になる
- 一定の範囲までならタグと input を横並びで表示させる
- 一定の範囲を超えたら改行して下段全体を 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 でkeypressやkeydownで Enter を拾う場合event.keyを使って判定します。
keyupは firefox などで日本語入力確定時にもEnterが出るのでkeypressかkeydownを使います。
ブラウザごとに動作が違うので要検証です。
下記が参考になるかと思います。
formの中にinputを配置することでsubmitイベントが発生するようになります。
submitイベントはformに対して発生します。
submitイベントをreturn falseでキャンセルすることでページ遷移を防ぐことができます。
このときにaddEventListener()でreturn falseしてもキャンセルできません。
preventDefault()を使えばキャンセルできますが、onsubmitでリスナを単一登録してreturn falseでキャンセルする方が安全かなと思います。
おわりに
今回のサンプルだとタグをクリックすると消せることが初見だとわかりづらい。
特にスマホだと絶対わからないと思う。
無難に × ボタンを常時右端に表示するとかがいいとは思ったけどサンプルとして出すにはちょっと構造がややこしくなるのでやりませんでした。
flex 強い！以上！