IE7＆8：.is（'：checked'）在隱藏輸入按鈕時被忽略

我有一個表格：http://jsfiddle.net/q2BnA/1/。我希望能夠點擊選項1，並將焦點放在字段1上，點擊選項2，並將焦點放在字段2上。所以，我有JQuery來做到這一點。它的工作原理很好，直到我添加此風格：IE7＆8：.is（'：checked'）在隱藏輸入按鈕時被忽略

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

現在我在IE8和IE7的問題（我要支持他們） - 焦點沒有給出。我假設這是因爲這一行：var option1 = $（'＃option1'）。is（'：checked'）;

但我不得不隱藏單選按鈕，因爲我通過造型我自己：

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

我怎樣才能解決這個對IE的？

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>

來源

2013-07-23 janeh

jQuery的哪個版本？ –

我們的網站目前鏈接到jquery-1.8.2，但如果其他版本解決了這個問題，我可以改變它。 – janeh

的問題是，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

來源

2013-07-23 16:52:53 Barney

通過'position：absolute;射擊單選按鈕顯示的優勢是什麼？左：-9999px'？ – janeh

好問題。 1）陰極盒模型縮進會導致計算一個巨大的額外佈局，[在某些情況下已知會對性能產生負面影響]（http://www.zeldman.com/2012/03/01/replacing-the -9999px-下鍋新圖像替換/）。2）這種行爲有效地使用戶直接與輸入交互（而不是隱式地通過它們的關聯標籤）：[這可以更可靠]（http://stackoverflow.com/questions/16747945/how-to-get-get- Firefox的點擊行爲到工作正常與 - CSS樣式-複選框-AN）。 – Barney

@Barney你的第一個鏈接是指文本縮進，它可以有效地產生一些性能問題。我可能是錯的，但我不認爲它可能與當前使用絕對位置的情況有關。但我真的不知道如何做一些基準測試。 –

的重點電流控制是必需的單擊事件。

看看這個話題：Changing Javascript Focus in onClick event?。

我會建議使用event.PreventDefault（）;看看這個答案在另一個線程：https://stackoverflow.com/a/1357151/335905

來源

2013-07-23 16:49:42 celerno

那就不要使用display none，使用此解決方法：

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

DEMO

來源

2013-07-23 16:49:48

IE7＆8：.is（'：checked'）在隱藏輸入按鈕時被忽略

回答

相關問題