一個HTML頁面上有多種形式：如何將製表限制爲一種形式？

我目前正在建設的網站與標準有點不同。所有網站內容都不在一個index.php文件中，而是使用絕對定位和JavaScript，而不是頁面之間有多個單獨的頁面。一個HTML頁面上有多種形式：如何將製表限制爲一種形式？

頁面中還有幾種不同的形式。我被告知不要擔心迎合JavaScript禁用的人員，所以我們選擇了jQuery與JSON Web服務結合，以適應頁面上的所有表單。這一切現在都完美運行，但是存在一個輕微的可用性問題：tab-indices。

由於存在多種形式，從一個輸入字段到下一個輸入字段的選項卡可能導致用戶突然跳到站點的完全不同部分，當用戶到達表單的結尾並再次選擇標籤時。這在Firefox和Safari中特別令人討厭，在Tab鍵時忽略按鈕和單選按鈕。

所以這裏是我的問題：有沒有人知道一種方法來限制用戶的焦點到一個單一的表單元素？

來源

2011-03-30 gillesv

收音機Tab鍵時，火狐忽略？它在我看來不是... – neurino 2011-03-30 09:37:18

嗯，現在我沒有看到與Mac 4上的Firefox 4。但是我被告知3.6是。 – gillesv 2011-03-30 10:17:11

從可訪問性的角度來看，這可能是一個問題：鍵盤用戶如何選擇第二種形式？看起來他們會陷入第一種形式，無法超越。 – BrendanMcK 2011-03-31 00:22:34

我目前正在建設的網站與標準有點不同。所有網站內容都不在一個index.php文件中，而是使用絕對定位和JavaScript，而不是在頁面之間跨越整個網站。

下面是一個替代方法，可能會使這個問題出現副作用，並最終變得更易於訪問。

我假設你在頁面上有一些你用來觸發從一個子頁面到另一個頁面的平移的元素？

如果是這樣，這裏的基本想法是，當任何頁面「滾出」隱藏「子頁面」（大概是一些容器DIV）與display：none或visibility：hidden的。

這裏的關鍵問題是，內容暗藏着這兩種方法都是非tabbable，因此用戶可以不小心標籤到這些隱藏的頁面。同樣重要的是，從可訪問性的角度來看，屏幕閱讀器知道忽略以這種方式標記的內容，因此他們只會閱讀當前頁面（與正確的用戶看到的頁面一致），而不是整個頁面。

來源

2011-03-31 00:26:10 BrendanMcK

這個功能就像一個魅力一樣，並且更好地實現可訪問性，因爲現在Tab鍵只能在屏幕上的元素和瀏覽器的UI之間循環。謝謝！ – gillesv 2011-04-01 07:57:22

聰明的傢伙！加一個給你，先生。我和OP有類似的問題 - 這是一個很好的解決方案。 – Bosworth99 2012-02-17 20:29:41

使用tabindex在你的（X）HTML

這完美的作品在組件Seamonkey 2.0.11和Chrome 10.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <title>untitled</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <style type="text/css"> 
     /* absolute positioning */ 
     #form1 { position: absolute; bottom: 0; right: 0; width: 40%; } 
     #form2 { position: absolute; top: 100px; left: 30px; width: 40%; } 
     /* floats 
     #form1 {float: right; width: 40%; } 
     #form2 {float: left; width: 40%; } */ 
    </style> 
</head> 

<body> 

<form id="form1" action="#" method="get"> 
<fieldset> 
<legend>Form 1</legend> 
<div><label for="t1">T1</label><input type="text" id="t1" name="t1" tabindex="1" /></div> 
<div><label for="t3">T3</label><input type="text" id="t3" name="t3" tabindex="3" /></div> 
<div><label for="t2">T2</label><input type="text" id="t2" name="t2" tabindex="2" /></div> 
<input type="submit" tabindex="4" /> 
</fieldset> 
</form> 

<form id="form2" action="#" method="get"> 
<fieldset> 
<legend>Form 2</legend> 
<div><label for="t6">T6</label><input type="text" id="t6" name="t6" tabindex="6" /></div> 
<div><label for="t5">T5</label><input type="text" id="t5" name="t5" tabindex="5" /></div> 
<input type="submit" tabindex="7" /> 
</fieldset> 
</form> 

</body> 

</html>

來源

2011-03-30 09:34:06 neurino

這不起作用。閱讀我的問題：在同一頁面上有多種形式。如果我在每種形式中使用相同的標籤指示符（即第一個輸入獲取tabindex 1，第二個輸入tabindex 2等...），用戶會在每種形式更糟糕的情況下繼續切換。如果我使用連續的tabindices，結果保持不變，就像我根本沒有使用tabindex一樣。 – gillesv 2011-03-30 10:22:03

我讀過你的問題..你當然不應該**重複索引和標準的編譯器瀏覽器_應該遵循w3c所說的索引。我會在測試頁面上嘗試。 – neurino 2011-03-30 10:26:42

@gillesv：添加測試頁，此外，如果這並不在你的網頁工作，它可能是由於你的（X）HTML錯誤的 – neurino 2011-03-30 10:57:53

好吧，我決定寫我自己的解決方案，在所有主要工作瀏覽器（Safari除外，但稍後更多）。基本上，它的工作方式是將一個類分配給表單中最後一個「tab-able」元素，通常是提交按鈕，稱爲「lastInForm」。簡單的HTML應該是這樣的：

<form action="action.php"> 
<fieldset><input id="input1" name="input1" type="text" placeholder="text here" /></fieldset> 
<fieldset><input id="input2" name="input2" type="text" placeholder="text here" /></fieldset> 
<fieldset><input id="input3" name="input3" type="text" placeholder="text here" /></fieldset> 

<button class="lastInForm" type="submit">I'm last</button> 
</form>

使用最新版本的jQuery，我聽爲.lastInForm元素的keydown事件，並檢查是否有鍵代碼9，對應於製表鍵。當我收到該事件時，我查找最接近的表單元素，查找表單中的第一個輸入元素，並將焦點應用於該表單。

像這樣：

$(document).ready(function(evt){ 

$('.lastInForm').live('keydown', function(evt){ 
    if(evt.keyCode === 9){ 
     evt.preventDefault(); 

     var form = $(this).closest('form'); 
     var input = $('input:first', form); 

     if(input !== undefined){ 
      input.focus(); 
     } 
    } 
}); 
});

...整齊地產生一種形式，你可以通過使用Tab鍵的元素循環。

現在我前面提到它可以在除Safari之外的所有主要瀏覽器上使用。原因是Safari默認情況下不允許您選擇除textfields以外的任何元素。爲了使這種行爲，你必須去檢查：

Preferences > Advanced > Universal Access: Press Tab to highlight each item on a webpage.

爲什麼蘋果選擇在默認情況下禁用這種有用的輔助功能超出了我，但我所知道的是，如果用戶啓用此設置我的腳本將工作對他們也是。

來源

2011-03-30 14:56:43 gillesv

現在，我意識到強迫這種非默認行爲並不完全適用於99％的網站，但對於這一個邊緣案例，我在其上工作就像一個魅力。希望有人會從中受益。 – gillesv 2011-03-30 14:58:14

可能的缺點是：在大多數瀏覽器（IE，Chrome，Firefox，Safari - Opera處理標籤的方式不同...）中，當您在頁面的末尾選擇標籤時，再次點擊標籤會將您帶到瀏覽器UI--通常是地址欄，然後從那裏回到頁面。這會干擾這一點。（用戶仍然可以打一些瀏覽器快捷鍵直接進入到地址欄，使它們不會完全被困然而，。）您可能需要考慮其他的事情：Shift-Tab鍵移動相反的方向，所以你需要以類似但互補的方式處理第一個領域。（更多在明年評論） – BrendanMcK 2011-03-31 11:17:43

此外，如果用戶不直接到地址欄（按Ctrl-L在一些鍍鉻/火狐，F4在IE）和卡口插入從那裏DOC（使用Tab鍵或Shift-標籤），也沒有保證瀏覽器將返回最後關注的元素;一些瀏覽器從頂部開始。其他表單在不用時是否可見？如果它們不可見，那麼在這些表單上使用display：none或visibility：false將會隱藏它們，並將它們完全從tab選項中取出，從而使所有這些邊緣案例都無法實現。 – BrendanMcK 2011-03-31 11:24:26

爲什麼不增加，比方說，你的100 tabindex屬性，每個表單？

所以表格1將有來自100-112運行tabindeces，形成2將擁有從200-234的tabindex，形成3將具有tabIndex從300-314運行...

來源

2013-07-02 09:38:13 someguy

一個HTML頁面上有多種形式：如何將製表限制爲一種形式？

回答

相關問題