Clavier avec aperçu de touche
Un clavier de téléphone où chaque touche grandit vers le haut en bulle avec une grande lettre, au toucher comme au focus.
Réglages
Code
<div class="uvq08-kbd"><div class="fd"><span class="tx" aria-live="polite">Bonjour</span><i class="cr" aria-hidden="true"></i></div><div class="kb" role="group" aria-label="Clavier"><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="Effacer" tabindex="-1">⌫</button></div><div class="rw"><button type="button" class="k sp" data-k=" " tabindex="-1">espace</button></div></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Un clavier sombre façon téléphone avec une disposition espagnole, Ñ comprise, et un champ de message au-dessus. Au survol, au focus ou à l’appui, une touche grandit vers le haut dans la bulle familière avec la lettre en grand, construite avec deux pseudo-éléments qui épousent la touche. Les touches écrivent dans le champ, les flèches passent de l’une à l’autre et une seule touche reste dans l’ordre de tabulation.
La couleur principale règle le curseur et l’anneau de focus, la secondaire la couleur de la bulle. Change les rangées pour une autre disposition ou réutilise la bulle sur des pavés numériques, des écrans de code PIN et des claviers de borne.