Question

我有一张表格：http://jsfiddle.net/q2BnA/1/。我希望能够单击选项1，并将焦点放在field1上，单击选项2，然后将焦点放在field2上。所以，我有JQuery这样做。它很好用，直到我添加这种风格：

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

现在我在IE8和IE7中遇到了问题（我必须支持它们） - 没有给出焦点。我假设这是因为这一行： var option1 = $（'＃option1'）。is（'：checked '）;

但是我必须隐藏单选按钮，因为我通过自己设计样式：

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

我如何为IE解决这个问题？

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>

Answer 1

然后不要使用display none，请使用此解决方法：

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

DEMO

Answer 2

问题在于display: none略多于装饰，所以你必须回避它。

如何将输入放在标签内，用opacity: 0（以及IE等价物）隐藏它们，并使它们占据容器的整个尺寸？

新代码如下：

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

...以及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%;
}

在这里分享您的演示： http://jsfiddle.net/barney/M8nnb/1

Answer 3

点击事件需要关注当前控件。

看看这个帖子：Changing Javascript Focus in onClick event?。

我建议使用event.PreventDefault（）;在另一个帖子中查看这个答案：https://stackoverflow.com/a/1357151/335905

IE7＆amp; 8：隐藏输入按钮时忽略.is（'：checked'）

3 个答案: