Tastatur mit Tastenvorschau
Eine Handytastatur, bei der jede Taste beim Drücken oder Fokussieren nach oben zu einer Blase mit großem Buchstaben wächst.
Einstellungen
Code
<div class="uvq08-kbd"><div class="fd"><span class="tx" aria-live="polite">Hallo</span><i class="cr" aria-hidden="true"></i></div><div class="kb" role="group" aria-label="Tastatur"><div class="rw"><button type="button" class="k lt" data-k="Q" tabindex="0">Q</button><button type="button" class="k lt" data-k="W" tabindex="-1">W</button><button type="button" class="k lt" data-k="E" tabindex="-1">E</button><button type="button" class="k lt" data-k="R" tabindex="-1">R</button><button type="button" class="k lt" data-k="T" tabindex="-1">T</button><button type="button" class="k lt" data-k="Y" tabindex="-1">Y</button><button type="button" class="k lt" data-k="U" tabindex="-1">U</button><button type="button" class="k lt" data-k="I" tabindex="-1">I</button><button type="button" class="k lt" data-k="O" tabindex="-1">O</button><button type="button" class="k lt" data-k="P" tabindex="-1">P</button></div><div class="rw"><button type="button" class="k lt" data-k="A" tabindex="-1">A</button><button type="button" class="k lt" data-k="S" tabindex="-1">S</button><button type="button" class="k lt" data-k="D" tabindex="-1">D</button><button type="button" class="k lt" data-k="F" tabindex="-1">F</button><button type="button" class="k lt" data-k="G" tabindex="-1">G</button><button type="button" class="k lt" data-k="H" tabindex="-1">H</button><button type="button" class="k lt" data-k="J" tabindex="-1">J</button><button type="button" class="k lt" data-k="K" tabindex="-1">K</button><button type="button" class="k lt" data-k="L" tabindex="-1">L</button><button type="button" class="k lt pk" data-k="Ñ" tabindex="-1">Ñ</button></div><div class="rw"><button type="button" class="k lt" data-k="Z" tabindex="-1">Z</button><button type="button" class="k lt" data-k="X" tabindex="-1">X</button><button type="button" class="k lt" data-k="C" tabindex="-1">C</button><button type="button" class="k lt" data-k="V" tabindex="-1">V</button><button type="button" class="k lt" data-k="B" tabindex="-1">B</button><button type="button" class="k lt" data-k="N" tabindex="-1">N</button><button type="button" class="k lt" data-k="M" tabindex="-1">M</button><button type="button" class="k bk" data-k="⌫" aria-label="Löschen" tabindex="-1">⌫</button></div><div class="rw"><button type="button" class="k sp" data-k=" " tabindex="-1">Leerzeichen</button></div></div></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 Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Eine dunkle Handytastatur mit spanischem Layout samt Ñ und einem Nachrichtenfeld darüber. Beim Hovern, Fokussieren oder Drücken wächst eine Taste nach oben in die vertraute Blase mit großem Buchstaben, gebaut aus zwei Pseudoelementen, die sich an die Taste schmiegen. Die Tasten schreiben ins Feld, Pfeiltasten wechseln zwischen ihnen, und nur eine Taste liegt in der Tab-Reihenfolge.
Die Hauptfarbe setzt Cursor und Fokusring, die Zweitfarbe die Farbe der Blase. Ändere die Reihen für ein anderes Layout oder nutze die Blase für Ziffernblöcke, PIN-Eingaben und Bildschirmtastaturen an Terminals.