Quel balisage HTML pour un TD focalisable?

Question

Je veux pratiquer, et même les meilleures pratiques, avec Html + JS + CSS. J'utilise une page Sudoku d'une seule page pour le client. Mon balisage Sudoku est fondamentalement un <table>, avec <td>.
(Je suis ouvert aux suggestions pour améliorer cela).

Mes exigences:

1. Activer une cellule sous le focus (notion de focus du clavier) (mise en surbrillance avec CSS sur fond jaune)
2. Naviguez dans les cellules à l'aide des touches fléchées (plus Accueil, etc.).
3. saisissez une valeur entière en définissant cette valeur sur la cellule actuellement focalisée

J'utilise un bouton de saisie à l'intérieur de chaque cellule. Le javascript fonctionne bien.

Mon seul problème est l'affichage. Lorsqu'une cellule a le focus, son affichage en surbrillance ne couvre pas l'intégralité de la balise , mais uniquement l'espace visuel inclus dans le bouton de saisie. J'ai un espace autour du bouton qui n'est pas "jaune".

Je ne pense pas que je pourrais monter dans la sélection CSS, pour sélectionner le parent de l'entrée, puis-je? Tels que:

input:focus '?? how to go up ??' td { background-color:yellow;

J'ai essayé quelques astuces, comme avoir toujours 5 caractères dans chaque affichage de bouton (5 espaces quand ils sont vides, changer le caractère du milieu quand ils sont définis), mais rien n’est satisfaisant visuellement. Pire encore, il est clairement contraire aux meilleures pratiques de modifier le contenu dans un souci de visualisation. C’est la raison pour laquelle la distinction MVC entre HTML / Css / Js est faite!

J'ai déjà cherché une réponse sur ce site, j'ai trouvé des questions et des réponses serrées mais distinctes.

J'espère que quelqu'un pourra m'aider à améliorer ma page ... et mes compétences en balisage: -)

Answer 1

Il n'est pas possible de construire un sélecteur CSS qui correspond à un nœud parent dépendant d'une classe (pseudo-) de nœud enfant.

En gros, vous avez le choix entre deux options:

• Essayez de renseigner td complètement les input règles en utilisant height et width les règles de votre CSS.

• Définissez les classes "ciblée" et "non ciblée" sur votre tds avec javascript à l'aide des événements onfocus et onblur des entrées.

Answer 2

Ne pourriez-vous pas utiliser un tiret de jQuery pour définir une classe .focused, puis lui appliquer un style?