ソーシャル・コミュニケーション
メンション入力
「@」を打つとユーザー候補のドロップダウンが絞り込み表示され、選ぶと藍色のメンションchipとして本文に挿入される。候補は矢印キーで移動、Enterで確定、Escで閉じられる。
プレビュー
入力
操作実際に入力して試せます。
実装メモ
本文は contenteditable の div で作り、選択範囲（Range）を操作して @クエリ文字列をメンションchip（contenteditable=false の span）に置き換えています。候補選びは blur で選択が消えないよう mousedown で確定します。実ページでは、送信時に chip の textContent や data 属性からユーザーIDを集めてサーバーへ渡してください。
コード（コピーして使えます）
<div class="mention-wrap" id="mWrap">
<span class="m-label" id="mLabel">コメントを書く</span>
<div class="editor-box">
<div class="editor" id="editor" contenteditable="true" role="textbox" aria-multiline="true" aria-labelledby="mLabel" data-placeholder="@ でメンション…"></div>
<ul class="m-menu" id="mMenu" role="listbox" aria-label="ユーザー候補" hidden></ul>
</div>
<p class="m-hint">「@」を入力するとメンション候補が開きます（↑↓ / Enter / Esc）</p>
</div>