HTML + CSSEingabefelder
Suchfeld mit Spracheingabe
Tippe auf das Mikrofon: Das Feld zeigt Schallwellen und schreibt Buchstabe für Buchstabe mit, was du sagst.
Einstellungen
16px
1x
Code
<div class="uv-ivo"><label class="fd"><span class="sr">Suchen oder diktieren</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input type="search" placeholder="Suchen oder diktieren"><span class="wv" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></i><i style="--i:12"></i><i style="--i:13"></i></span></label><button type="button" class="mc" aria-pressed="false" aria-label="Diktieren"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg></button><p class="st" aria-live="polite"></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.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Spracheingabe ist am Handy üblich, und ein klarer Aufnahmezustand schafft Vertrauen. Beim Tippen wird das Mikrofon rot mit pulsierendem Ring, im Suchfeld erscheinen animierte Tonbalken, eine Statuszeile meldet, dass zugehört wird, und die Transkription erscheint Buchstabe für Buchstabe. Ein zweiter Tipp bricht ab.
Die Demo tippt einen Beispielsatz, das Skript markiert, wo die Spracherkennung des Browsers angebunden wird. Das Mikrofon ist ein Toggle-Button mit aria-pressed, die Statuszeile wird vorgelesen.