1

我想实践，甚至是最佳实践，使用 Html+JS+CSS。我使用一页仅限客户端的数独页面。我的数独标记基本上是<table>, 和<td>.
（我愿意接受改进这一点的建议）。

我的要求：

  1. 有一个单元格处于焦点下（焦点的键盘概念）（用 css 突出显示为黄色背景）
  2. 使用箭头键（加上主页等）浏览单元格。
  3. 输入一个整数值将该值设置为当前聚焦的单元格

我在每个单元格内使用一个输入按钮。Javascript 工作正常。

我唯一的问题是显示器。 当一个单元格有焦点时，它的高亮显示不会覆盖整个 TD，而只是包含在输入按钮中的视觉空间。我在按钮周围有一些不是“黄色”的空间。

我认为我不能在 CSS 选择中选择输入的父项，可以吗？如 ：

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

我尝试了一些技巧，例如在每个按钮显示中始终显示 5 个字符（空时为 5 个空格，设置时更改中间字符），但没有什么是视觉上令人满意的。更糟糕的是，为了可视化而改变内容显然是违反最佳实践的。这就是 Html/Css/Js 之间的 MVC 区别的原因！

我已经在这个网站上搜索了答案，我发现了密切但不同的问题和答案。

我希望有人可以帮助改进我的页面......以及我的标记技巧:-)

4

2 回答 2

3

不可能构造一个 css 选择器来匹配依赖于子节点的（伪）类的父节点。

基本上你有两种选择：

  • 尝试在您的 css中td填充input完全使用height和规则。width

  • onfocus使用输入的和onblur事件在您的 tds 上设置 'focused' 和 'unfocused' 类。

于 2009-08-02T17:53:10.950 回答
0

你能不能用一点 jQuery 来设置一个 .focused 类，然后对其应用一些样式？

于 2009-08-02T18:20:15.207 回答