Was Html-markup für eine fokussierbare TD?

Question

Ich will practive, und auch best-practice, mit Html+JS+CSS.Ich verwenden Sie eine Seite nur-client-Sudoku Seite.Mein Sudoku-markup ist im Grunde ein <table>, mit <td>.
(Ich bin offen für Vorschläge, um diese zu verbessern).

Meine Anforderungen :

1. Haben Zelle im Fokus (die Tastatur Begriff des Fokus) (highlighed mit css auf gelbem hintergrund)
2. Navigieren Sie durch die Zellen mit den Pfeiltasten (plus Home etc).
3. geben Sie einen ganzzahligen Wert legt, dass der Wert der aktuell fokussierten Zelle

Ich verwenden eine input-Taste innerhalb jeder Zelle.Das Javascript funktioniert.

Mein problem ist nur mit dem display.Wenn eine Zelle den Fokus hat, ist es hervorgehoben display-deckt nicht das gesamte TD, sondern nur den visuellen Raum enthalten in die input-Taste.Ich habe einige Raum um die Taste, die nicht "gelb".

Ich glaube nicht, dass ich gehen könnte in der CSS-Auswahl, wählen Sie das übergeordnete Element der Eingabe, könnte ich ?Wie :

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

Ich habe versucht, ein paar tricks, wie immer 5 Zeichen, die in jedem display-Taste (5 Räume, wenn Sie leer sind, die änderung der mittleren Charakter, wenn gesetzt), aber nichts ist optisch befriedigend.Schlimmer noch, es ist deutlich gegen die besten Praktiken zu ändern, die Inhalte für das Interesse der Visualisierung.Das ist es, was die MVC Unterscheidung zwischen Html/Css/Js ist !

Ich habe bereits gesucht, diese Seite für die Antwort fand ich in der Nähe, aber unterschiedliche Fragen und Antworten.

Ich bin der Hoffnung, jemand könnte helfen, verbessern Sie meine Seite ...und mein markup skill :-)

Answer 1

Es ist nicht möglich, bauen Sie einen css-Selektor entspricht einem übergeordneten Knoten abhängig von einer (pseudo-)Klasse von untergeordneten Knoten.

Grundsätzlich haben Sie zwei Optionen zur Auswahl:

• Versuchen Sie, füllen die td mit der input komplett mit height und width Regeln in der css.

• Set 'konzentriert' und 'unscharf' - Klasse, die auf Ihrem tds mit javascript und der onfocus und onblur Ereignisse der Eingänge.

Answer 2

Könnte man nicht einen Hauch von jQuery zu setzen .konzentriert Klasse und dann gelten einige Stil es?