Элемент управления TabIndex на несоответствующей HTML-странице - PullRequest
Новая
       26

Элемент управления TabIndex на несоответствующей HTML-странице

1 голос
/ 26 июня 2010

У меня есть 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. но это не помогло Конечно, флажок может быть установлен / снят, но я хотел, чтобы флажок был выделен. (Под выделенным - я имею в виду пунктирный квадрат вокруг объекта)

Спасибо.

Ответы [ 2 ]

1 голос
/ 26 июня 2010

Это не красиво, но может работать для вас: 

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

0 голосов
/ 26 июня 2010

Разрешено не использовать <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> И это все сделано.

...