0

I have a form: http://jsfiddle.net/q2BnA/1/ . I want to be able to click on Option 1, and give focus to field1, click on Option 2, and give focus to field2. So, I have JQuery to do that. It works good, until I add this style: 

input[type=checkbox], input[type=radio]  {
        display:none;
    }

Now I have a problem in IE8 and IE7 (I have to support them) - focus is not given. I am assuming it's because of this line: var option1 = $('#option1').is(':checked');

But I have to hide radio buttons because I am styling my own via:

input[type=radio] + label {
    /*look nice*/
}

How can I resolve this for IEs?

JQ

function focusThis() {
        var option1 = $('#option1').is(':checked');
        if (option1) {
            //alert(1);
            $('#field1').focus();
        } else {
            //alert(2);
            $('#field2').focus();
        }
    }

HTML

<form>
<fieldset><legend>Options</legend>
      <ul>
        <li><input type="radio" name="A" id="option1" onclick="focusThis();"><label for="option1">Option 1</label> 
            <label for="field1">Field 1</label><input id="field1"/></li>

        <li><input type="radio" name="A" id="option2" onclick="focusThis();"><label for="option2">Option 2</label>

            <fieldset id=""><legend></legend>
              <ul>
                <li><label for="field2">Field 2</label> <input id="field2"/></li>
                  <li><label for="field3">Field 3</label> <input id="field3"/></li>
              </ul>
          </fieldset>
         </li>
      </ul>
  </fieldset>
</form>
4

3 回答 3

1

Then don't use display none, use this workaround:

input[type=checkbox], input[type=radio]  {
       position:absolute;
       left:-9999px;
       top:-9999px;
    }

DEMO

于 2013-07-23T16:49:48.530 回答
1

The problem is that display: none is slightly more than cosmetic, so you have to sidestep it.

How about putting the inputs inside the labels, hiding them with opacity: 0 (and the IE equivalent) instead, and making them occupy the full dimensions of their containers?

The new code is as follows:

<label for="option1">
    <input type="radio" name="A" id="option1" onclick="focusThis();">
    Option 1
</label>

…and for the CSS:

label {
    position: relative;
}

input[type=checkbox], input[type=radio]  {
    opacity: 0;
    /* IE 5-7 */
    filter: alpha(opacity=0);
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

Forked your demo here: http://jsfiddle.net/barney/M8nnb/1

于 2013-07-23T16:52:53.850 回答
0

The focus on the current control is required for the click event.

Look at this thread: Changing Javascript Focus in onClick event?.

I'll suggest to use event.PreventDefault(); look at this answer in another thread: https://stackoverflow.com/a/1357151/335905

于 2013-07-23T16:49:42.003 回答