タグ入力（Enter で追加）
Enter キーを押すたびに入力内容をタグ（チップ）化していくフォームです。JavaScriptで keydown を監視し、 Enter が押されたら入力値から span 要素を作って一覧に追加、入力欄を空に戻します。各タグの × をクリックすると、その場で削除されます。
解説
Enterキーを押すたびに入力内容をタグ（チップ）化していくフォームです。JavaScriptでkeydownを監視し、Enterが押されたら入力値からspan要素を作って一覧に追加、入力欄を空に戻します。各タグの×をクリックすると、その場で削除されます。
向いている場面
スキルや興味タグの登録、ブログ記事のキーワード入力、検索条件の絞り込みなど、複数の短い語を次々に追加したい場面に合います。タグと入力欄が同じ枠内に並ぶので、入力の流れが途切れません。
- 空の状態で
Backspaceを押すと末尾のタグが消える親切設計 - タグの色や形（
border-radius:999pxの丸み）はCSSで調整できる - 枠は
:focus-withinで入力中だけ縁色が変わる
実務では同じタグの重複登録を防ぐチェックや、入力できる文字数の上限を加えると安心です。タグ追加・削除の操作をキーボードだけで完結できるのも利点です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
追加したタグを削除するには
各タグに付いている × をクリックするとそのタグが消えます。また、入力欄が空の状態でBackspaceキーを押すと、末尾のタグが1つ削除されます。マウスとキーボードのどちらでも操作できます。
同じタグを重複して追加しないようにできますか
このサンプルには重複チェックは入っていません。タグ追加の処理で既存のタグ一覧に同じ値があるか確認し、あれば追加しないようにJavaScriptを少し足せば重複を防げます。