不兼容的 html 页面中的 TabIndex 控件答案

【问题标题】：TabIndex control in a non compliant html page不兼容的 html 页面中的 TabIndex 控件
【发布时间】：2011-03-08 12:29:33
【问题描述】：

我有一个 html 页面，我不能在其中放置 DOCTYPE（我不允许）。另外，我需要让它在 IE 8 上运行！然后是一个复选框+标签的东西。例如，这个：

    <input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
    <label for="daffodils">Daffodils</label>
    <input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
    <label for="tulips">Tulips</label>

我的问题：我想在 Tab 周围突出显示复选框，但是使用此代码，只有标签被突出显示。我尝试使用 TabIndex。但这没有帮助。当然，可以选中/取消选中该复选框，但我希望该复选框被突出显示。（通过突出显示 - 我的意思是 .. 对象周围的虚线正方形）

谢谢。

【问题讨论】：

标签： javascript html checkbox internet-explorer label

【解决方案1】：

这并不漂亮，但它可能对你有用：

<html>
  <head>
    <title>Whatever</title>

    <script type="text/javascript">
      function focusThis(This) {
        This.className='focus';
      }

      function blurThis(This) {
        This.className='blur';
      }
    </script>

    <style type="text/css">
      .focus {
        border: 1px dotted black;
      }

      .blur {
        border: 1px solid white;
      }
    </style>
  </head>
  <body>
    <input id="daffodils" onfocus="focusThis(this);" onblur="blurThis(this);" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
    <label for="daffodils">Daffodils</label>
    <input id="tulips" onfocus="focusThis(this);" onblur="blurThis(this);" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
    <label for="tulips">Tulips</label>
  </body>
</html>

注意输入框上的onfocus 和onblur 事件。

编辑：

如果您愿意使用 jQuery 库，只需添加和删除 focus 类即可轻松摆脱输入标签内的 onfocus 和 onblur 事件：

<html>
  <head>
    <title>Whatever</title>

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function(){
        $('input').focus(function(){
          $(this).addClass('focus');
        }).blur(function(){
          $(this).removeClass('focus');
        });
      });
    </script>

    <style type="text/css">
      .focus {
        border: 1px dotted black;
      }
    </style>
  </head>
  <body>
    <input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
    <label for="daffodils">Daffodils</label>
    <input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
    <label for="tulips">Tulips</label>
  </body>
</html>

我确信有人可以编写 JS 代码来做同样的事情，但我更喜欢 jQuery。

【讨论】：

不错的技巧。也许我不得不去争取它。谢谢。
谢谢。如果你愿意使用这个库，我添加了一个 jQuery 示例来展示如何使它更容易。
我添加了一个不同的 hack（在 Firefox 中不起作用），但解决了我的目的。我将 Label1 设为 Checkbox 的标签，将 Label2 设为 Lable1 的标签。

【解决方案2】：

是否允许不使用<label>？

<div style="cursor:default;" onclick="this.childNodes[0].focus();this.childNodes[0].click();"><input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2><span>Daffodils</span></div>
<div style="cursor:default;" onclick="this.childNodes[0].focus();this.childNodes[0].click();"><input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3><span for="tulips">Tulips</span></div>

这样就好了。

对于每个复选框，将它们包围在 <div style="cursor:default;" onclick="this.childNodes[0].focus();this.childNodes[0].click();"><input /><span /></div> 这一切都完成了。

【讨论】：

这是一个有趣的建议。但问题是：现在如果我单击（使用鼠标）文本（水仙花），复选框将不会被选中/取消选中。我认为属性仅适用于标签。
这确实是一种 hack，它使表单比使用标签更难访问。