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

发布于 2024-09-06 22:21:04 字数 600 浏览 3 评论 0原文

我有一个 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。但这没有帮助。当然，可以选中/取消选中该复选框，但我希望突出显示该复选框。（突出显示 - 我的意思是..物体周围的虚线方块）

谢谢。

原文

I have an html page where I cannot put a DOCTYPE (I am not allowed to). Plus, I need to make it work on IE 8!
Then there is a checkbox + label thing.
For example, this:

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

My problem:
I want to get the checkbox highlighted when I Tab around, but with this code, only the Labels get highlighted. I tried using TabIndex. but it didn't help.
Of course, the checkbox can be checked/unchecked, but I wanted the checkbox to be highlighted. (By highlighted - I mean ..the dotted square around an object)

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

国际总奸 2024-09-13 22:21:04

这不太漂亮，但可能对您有用：

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

This is not pretty, but it might work for you:

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

Notice the onfocus and onblur events on the input boxes.

Edit:

If you're open to using the jQuery library, you can easily get away from the onfocus and onblur events inside the input tags by just adding and removing the focus class:

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

I'm sure someone could write the JS code to do the same, but I prefer jQuery.

回复收藏 0 原文

水水月牙 2024-09-13 22:21:04

可以不使用吗？

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

那就好了。

对于每个复选框，将它们包围在

一切就这样完成了。

Is it allowed not to use <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>

That will be fine.

for every checkbox, suurround them in
<div style="cursor:default;" onclick="this.childNodes[0].focus();this.childNodes[0].click();"><input /><span /></div>
And that's all done.

回复收藏 0 原文

~没有更多了~