Question

我有一个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>

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

感谢。

Answer 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库，只需添加和删除onfocus类，即可轻松摆脱输入标记内的onblur和focus事件：

<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。

Answer 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> 这一切都已完成。

TabIndex控件在不兼容的html页面中

2 个答案: