Я хочу практиковать, и даже лучшие практики, с Html + JS + CSS.
Я использую одностраничную страницу судоку только для клиентов.
Моя разметка судоку в основном <table>, с <td>.
(Я открыт для предложений по улучшению этого).
Мои требования:
- Сфокусировать ячейку (понятие фокуса на клавиатуре) (выделено css на желтом фоне)
- Навигация по ячейкам с помощью клавиш со стрелками (плюс «Домой» и т. Д.).
- введите целочисленное значение, которое устанавливает текущую ячейку
Я использую кнопку ввода внутри каждой ячейки.
Javascript работает нормально.
Моя единственная проблема с дисплеем.
Когда ячейка имеет фокус, подсвеченный дисплей не покрывает весь TD , а только визуальное пространство, включенное в кнопку ввода. У меня есть некоторое пространство вокруг кнопки, которая не «желтая».
Не думаю, что я мог бы перейти в выделение CSS, чтобы выбрать родителя для ввода, не так ли? Такие как:
input:focus '?? how to go up ??' td { background-color:yellow;
Я попробовал несколько трюков, например, чтобы на каждой кнопке всегда было 5 символов (5 пробелов, когда они пустые, смена среднего символа, когда установлено), но ничего визуально не удовлетворяло.
Что еще хуже, это явно против лучших практик по изменению контента ради визуализации. Вот для чего различие MVC между Html / Css / Js!
Я уже искал ответ на этом сайте, нашел близкие, но четкие вопросы и ответ.
Я надеюсь, что кто-то может помочь улучшить мою страницу ... и мой навык разметки: -)