強制隱藏元素上的製表符停止？可能？

我已經選擇使用單選按鈕的標籤作爲它們的自定義按鈕。這意味着無線電輸入本身是顯示：無。因此，瀏覽器不會停止在收音機標籤上，但我希望它們能夠。

我試着強迫tabindex給他們，但沒有雪茄。

我想出了一個沒有意義的複選框放在標籤之前，並將其設置爲width：1px;和高度1px;這似乎只對鉻&野生動物園真正起作用。

那麼你有沒有其他的想法強迫在這些位置的製表位沒有顯示元素？

編輯：

只是櫃面別人來此，這就是我如何能夠使用JQuery小複選框插入鉻&野生動物園：

if ($.browser.safari) { 
    $("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">'); 
    $("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">'); 
    $("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">'); 
}

注：$ .browser.webkit是不成真...所以我不得不使用野生動物園

來源

2010-08-21 ParoX

保持無線電輸入隱藏，但在達到無線電輸入的<label>元素上設置tabindex="0"。

（爲0的標籤索引保持與具有未指定的標籤索引其它元件仍tabbable標籤流動的元件。）

來源

2010-08-21 12:40:27 strager

這不起作用，即使將tabindex =「0」放在隱藏的無線電輸入的標籤上似乎也會被跳過。至少在鍍鉻。 – ParoX 2010-08-21 13:52:54

@Brian，看來我錯了; 'tabindex'非非表單元素是某些瀏覽器（例如IE和Firefox，這是我測試過的）的擴展。 – strager 2010-08-21 23:14:34

那麼，如果它適用於Firefox和IE（2種最流行的瀏覽器），那麼這將作爲解決方案。似乎實際上鍛鍊，因爲複選框方法最適合鉻和Safari瀏覽器...所以我會使用複選框方法爲那些2 ...一切我會用tabindex = 0 – ParoX 2010-08-22 01:10:46

-1

放棄收音機按鈕，而是;在你的代碼中保留一些隱藏的字段，在其中存儲你的UI組件的選定值。

來源

2010-08-21 12:35:37 roosteronacid

這將需要重寫已經設置好的所有東西，我正在尋找更簡單的解決方案。我做單選按鈕的原因是爲了避免編寫代碼來需要某種輸入......等等。 – ParoX 2010-08-21 13:53:56

有時您會遇到需要重構一些場景......並且據我所知，您需要的僅僅是每個選項卡上的JavaScript單擊事件，它將採用當前選定選項卡的標識並放置它在一個隱藏的領域。然後，只需要將服務器端代碼更改爲使用隱藏字段中的值而不是單選按鈕即可。 – roosteronacid 2010-08-21 14:16:26

如果從任何字段分離標籤，並設置爲在tabIndex即可標籤它捕捉鼠標和關鍵事件。使用按鈕或輸入類型=「按鈕」，似乎更明智，但適合自己。

<form> 
<fieldset> 
<input value="today"> 
<label tabIndex="0" onfocus="alert('label');">Label 1</label> 
</fieldset> 
</form>

來源

2010-08-22 05:07:41 kennebec

另一個偉大的選擇是巢您輸入+ DIV在標籤和隱藏通過設置寬度和高度輸入爲0px代替顯示：無

這方法甚至允許您使用僞類，如：焦點或：通過使用輸入進行檢查：pseudo + styleDiv

<label> 
    <input type="radio"> 
    <div class="styleDiv">Display text</div> 
</label> 

input 
{ 
    width: 0px; 
    height: 0px; 
} 

input + .styleDiv 
{ 
    //Radiobutton style here 
    display: inline-block 
} 

input:checked + .styleDiv 
{ 
    //Checked style here 
}

來源

2016-02-08 10:37:47 Aides

我有一個替代答案，我認爲還沒有提到。對於最近的工作，我一直在閱讀Mozilla開發人員文檔MDN Docs, Forms，尤其是無障礙部分MDN Docs, Accessible HTML(5)，以獲取有關鍵盤可訪問性和表單結構的信息。

「輔助功能」部分中的一個具體提及是在可能的時間和地點使用HTML5元素 - 默認情況下，它們通常具有跨瀏覽器和更易於訪問的支持（並非總是如此，但清晰的內容結構和適當的元素也有助於屏幕閱讀和鍵盤輔助功能）。

反正，這裏有一個的jsfiddle：JSFiddle::Keyboard Accessible Forms

從本質上講，我所做的就是：

無恥地在一些源代碼從Mozilla的源代碼複製到的jsfiddle（源在小提琴的評論中）
創建一個TEXT類型並將其指定爲「只讀」HTML5屬性
附加屬性的tabindex = 「0」到只讀
修改該輸入元件的「只讀」 CSS所以看起來「空白」或隱藏的」

HTML

<title>Native keyboard accessibility</title> 
<body> 

    <h1>Native keyboard accessibility</h1> 

    <hr> 

    <h2>Links</h2> 

    <p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p> 

    <p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> 

    <h2>Buttons</h2> 

    <p> 
    <button data-message="This is from the first button">Click me!</button> 
    <button data-message="This is from the second button">Click me too! 
    </button> 
    <button data-message="This is from the third button">And me!</button> 
    </p> 

    <!-- "Invisible" HTML(5) element --> 
    <!-- * a READONLY text-input with modified CSS... --> 
    <hr> 
    <label for="hidden-anchor">Hidden Anchor Point</label> 
    <input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly /> 
    <hr> 

    <h2>Form</h2> 

    <form name="personal-info"> 
    <fieldset> 
     <legend>Personal Info</legend> 
     <div> 
     <label for="name">Fill in your name:</label> 
     <input type="text" id="name" name="name"> 
     </div> 
     <div> 
     <label for="age">Enter your age:</label> 
     <input type="text" id="age" name="age"> 
     </div> 
     <div> 
     <label for="mood">Choose your mood:</label> 
     <select id="mood" name="mood"> 
      <option>Happy</option> 
      <option>Sad</option> 
      <option>Angry</option> 
      <option>Worried</option> 
     </select> 
     </div> 
    </fieldset> 
    </form> 


    <script> 
    var buttons = document.querySelectorAll('button'); 

    for(var i = 0; i < buttons.length; i++) { 
     addHandler(buttons[i]); 
    } 

    function addHandler(button) { 
     button.addEventListener('click', function(e) { 
     var message = e.target.getAttribute('data-message'); 
     alert(message); 
     }) 
    } 
    </script> 

</body>

CSS樣式

input { 
    margin-bottom: 10px; 
} 

button { 
    margin-right: 10px; 
} 

a:hover, input:hover, button:hover, select:hover, 
a:focus, input:focus, button:focus, select:focus { 
    font-weight: bold; 
} 


.hidden-anchor { 
    border: none; 
    background: transparent!important; 
} 
.hidden-anchor:focus { 
    border: 1px solid #f6b73c; 
}

順便說一句，您可以編輯.hidden-anchor的CSS規則：重點刪除隱藏的錨的突出顯示，如果你想。我添加它只是爲了「證明」這裏的概念，但它仍然按要求隱形工作。

我希望這有助於！

來源

2017-09-20 00:28:01 RoboBear

強制隱藏元素上的製表符停止？可能？

回答

相關問題