タグ入力 Tag Input
複数のタグやキーワードを入力・削除できるフォーム要素。
ライブデモ
Enter または カンマ で追加、Backspace で削除
ソースコード
<div class="demo-taginput">
<label class="demo-taginput-label">スキルを追加</label>
<div class="demo-taginput-box">
<div class="demo-taginput-tags"></div>
<input class="demo-taginput-input" type="text" placeholder="入力してEnter..." />
</div>
<div class="demo-taginput-hint">Enter または カンマ で追加、Backspace で削除</div>
</div>.demo-taginput { max-width: 360px; }
.demo-taginput-label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.demo-taginput-box {
display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
border: 2px solid #d1d5db; border-radius: 8px;
transition: border-color 0.2s, box-shadow 0.2s; cursor: text;
}
.demo-taginput-box.focused {
border-color: var(--ui-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-taginput-tag {
display: inline-flex; align-items: center; gap: 4px;
background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
color: var(--ui-primary); padding: 4px 8px; border-radius: 6px;
font-size: 13px; font-weight: 500; animation: demo-taginput-in 0.2s ease;
}
@keyframes demo-taginput-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.demo-taginput-remove {
background: none; border: none; color: var(--ui-primary); cursor: pointer;
font-size: 14px; padding: 0 2px; opacity: 0.6; transition: opacity 0.2s;
}
.demo-taginput-remove:hover { opacity: 1; }
.demo-taginput-input {
flex: 1; min-width: 80px; border: none; outline: none;
font-size: 14px; padding: 4px;
}
.demo-taginput-hint { font-size: 12px; color: #6b7280; margin-top: 6px; }(function(){
var tags = [];
var box = document.querySelector('.demo-taginput-box');
var container = document.querySelector('.demo-taginput-tags');
var input = document.querySelector('.demo-taginput-input');
function renderTags() {
container.innerHTML = tags.map(function(t, i) {
return '<span class="demo-taginput-tag">' + t + '<button class="demo-taginput-remove" data-idx="' + i + '">×</button></span>';
}).join('');
}
function addTag(val) {
val = val.trim();
if (val && tags.indexOf(val) === -1) { tags.push(val); renderTags(); }
input.value = '';
}
input.addEventListener('keydown', function(e) {
if ((e.key === 'Enter' || e.key === ',') && this.value.trim()) {
e.preventDefault(); addTag(this.value.replace(',', ''));
}
if (e.key === 'Backspace' && !this.value && tags.length) {
tags.pop(); renderTags();
}
});
container.addEventListener('click', function(e) {
var btn = e.target.closest('.demo-taginput-remove');
if (btn) { tags.splice(parseInt(btn.dataset.idx), 1); renderTags(); }
});
box.addEventListener('click', function() { input.focus(); });
input.addEventListener('focus', function() { box.classList.add('focused'); });
input.addEventListener('blur', function() { box.classList.remove('focused'); });
tags = ['JavaScript', 'TypeScript'];
renderTags();
})();AIプロンプト
Basic
タグ入力フォームをHTML/CSS/JSで作ってください。テキストを入力してEnterで追加、xボタンで削除できます。
Custom
以下の仕様でタグ入力を実装してください。 - Enter またはカンマで新しいタグを追加 - 各タグに削除ボタン（xアイコン） - プライマリカラー: #2563eb - 重複タグの追加を防止 - Backspaceで最後のタグを削除 - タグ追加時のスケールインアニメーション - 最大タグ数の制限（5個まで）
Advanced
アクセシビリティ対応のタグ入力を実装してください。 - role="list" / role="listitem" によるタグリストのセマンティクス - 各タグの削除ボタンに aria-label="○○を削除" - aria-live="polite" でタグの追加・削除をスクリーンリーダーに通知 - ドラッグ&ドロップによるタグの並び替え - オートコンプリート候補の表示 - 矢印キーでタグ間のフォーカス移動 - フォーム送信時の hidden input へのシリアライズ