Escribe @ y elige con las flechas y Enter

HTML + CSSEingabefelder

Kommentarfeld mit Erwähnungen

Tippe ein At-Zeichen und eine Personenliste erscheint; die gewählte Erwähnung bleibt direkt im Text hervorgehoben.

Einstellungen

16px
1x

Code

<div class="uvq06-mn"><label for="uvq06-mn-in" class="lb">Kommentar</label><div class="fd"><div class="bk" aria-hidden="true"></div><textarea id="uvq06-mn-in" rows="3" role="combobox" aria-expanded="false" aria-controls="uvq06-mn-ls" aria-autocomplete="list" placeholder="Tippe @ zum Erwähnen"></textarea><ul id="uvq06-mn-ls" role="listbox" aria-label="Personen" hidden><li role="option" id="uvq06-mn-o0" data-n="Lucía Martín" aria-selected="false"><i style="--a:#f97316">LM</i><span>Lucía Martín</span><em>Design</em></li><li role="option" id="uvq06-mn-o1" data-n="Pablo Ortega" aria-selected="false"><i style="--a:#0ea5e9">PO</i><span>Pablo Ortega</span><em>Produkt</em></li><li role="option" id="uvq06-mn-o2" data-n="Marta Ruiz" aria-selected="false"><i style="--a:#16a34a">MR</i><span>Marta Ruiz</span><em>Entwicklung</em></li><li role="option" id="uvq06-mn-o3" data-n="Jorge Sanz" aria-selected="false"><i style="--a:#a855f7">JS</i><span>Jorge Sanz</span><em>Vertrieb</em></li><li role="option" id="uvq06-mn-o4" data-n="Nuria Vidal" aria-selected="false"><i style="--a:#e11d48">NV</i><span>Nuria Vidal</span><em>Marketing</em></li></ul></div><p class="ht">Tippe @ und wähle mit Pfeiltasten und Enter</p></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Eingabefelder

Alle ansehen: Eingabefelder

Wofür du ihn nutzen kannst

Ein Kommentarfeld, das sich wie in Team-Tools verhält. Ein @ öffnet eine barrierefreie Combobox mit Avataren und Rollen, die beim Tippen filtert und sich mit Pfeiltasten, Enter oder Tab steuern lässt. Gewählte Namen werden im Textfeld selbst hervorgehoben, über eine Spiegelebene hinter dem transparenten Feld, sodass natives Bearbeiten, Rückgängig und Rechtschreibprüfung weiter funktionieren.

Ersetze die Personenliste durch dein Team und wähle die Hauptfarbe für Markierung und Fokusring. Es passt zu Aufgabenkommentaren, Code-Review-Notizen und Chat-Eingaben, und der Spiegeltrick funktioniert mit einem anderen Muster auch für Hashtags oder Variablen.