ansaurus

Question

TabIndex control in a non compliant html page

Answer 1

A:

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.

Cauly 2010-06-26 00:05:15

This in an interesting suggestion. But the problem is : Now if I click (using mouse) the Text (Daffodils), the checkbox will not be checked/unchecked. I think for attribute is only for Labels.

Trilok 2010-06-26 00:30:13

Updated and that's well done. No hack is used.

Cauly 2010-06-26 01:55:58

It sure is a hack and it makes the form less accessible than using labels.

Gert G 2010-06-26 02:47:40

Answer 2

+1 A:

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.

Gert G 2010-06-26 00:44:45

Nice hack. Perhaps I'll have to go for it.Thanks.

Trilok 2010-06-26 01:00:52

Thanks. I added a jQuery example to show how to make it easier if you're willing to use this library.

Gert G 2010-06-26 01:24:19

I added a different hack (which doesn't work in Firefox) but solves my purpose. I made Label1 the label for Checkbox and Label2 label for Lable1.

Trilok 2010-07-10 21:55:50

ansaurus

tags:

views:

answers:

TabIndex control in a non compliant html page

related questions