問題描述

我想讓瀏覽器的行為就像用戶在點擊某物時按下了 Tab 鍵一樣.在點擊處理程序中，我嘗試了以下方法:

I'd like to have the browser act as if the user had pressed the Tab key when they click on something. In the click handler I've tried the following approaches:

var event = document.createEvent('KeyboardEvent');
event.initKeyEvent("keypress", true, true, null, false, false, false, false, 9, 0);
this.input.focus()[0].dispatchEvent(event);

還有 jQuery:

this.input.focus().trigger({ type : 'keypress', which : 9 });

...我取自這里.

第一種方法似乎是最好的選擇，但不太奏效.如果我將最后兩個參數更改為 98、98，實際上，在輸入框中輸入了一個b".但是 9, 0 和 9, 9(我直接從 MDC 網站獲取的前者)在 FF3 下的 firebug 中都給了我這些錯誤:

The first approach seems to be the best bet, but doesn't quite work. If I change the last two parameters to 98, 98, indeed, a 'b' is typed into the input box. But 9, 0 and 9, 9 (the former of which I took right from the MDC web site) both give me these errors in firebug under FF3:

Permission denied to get property XULElement.popupOpen
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to get property XULElement.overrideValue
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to get property XULElement.selectedIndex
[Break on this error] this.input.focus()[0].dispatchEvent(event);

Permission denied to set property XULElement.selectedIndex
[Break on this error] this.input.focus()[0].dispatchEvent(event);

我聽說此類(沒有明確定義此類")事件是不受信任的"，這可能解釋了這些錯誤.

I've heard such (with no clear definition of 'such') events are 'untrusted', which might explain these errors.

第二種方法會導致我作為 event.which 輸入的任何值都作為 event.which 傳遞，但沒有效果(即使我使用 98 而不是 9，也不會在框中輸入b".)如果我嘗試在我傳遞的對象中設置 event.data，當事件被觸發時，它最終是未定義的.以下是我用來查看的代碼:

The second approach causes whatever value I put as event.which to be passed as event.which, but to no effect (even if I use 98 instead of 9, no 'b' is typed in the box.) If I try setting event.data in the object I'm passing, it ends up undefined when the event is triggered. What follows is the code I'm using to view that:

$('#hi').keypress(function(e) {
  console.log(e);
});

還有其他想法嗎?

推薦答案

我最終采用的解決方案是創建一個焦點竊取器" div(tabindex = -1--可以有焦點但不能選項卡最初)在我想要手動管理焦點的區域的任一側.然后我放置了一個冒泡的真實事件監聽器，用于對整個區域進行聚焦和模糊處理.當該區域發生任何焦點時，tabindex 值將更改為 -1，當發生任何模糊時，它們將更改為 0.這意味著當焦點在該區域時，您可以使用 tab 或 shift-tab 離開它并且正確地結束在其他頁面元素或瀏覽器 UI 元素上，但是一旦您離開那里，焦點竊取器就會變成可選項卡，并且在焦點上它們正確設置手動區域并將焦點轉移到最后的元素上，就像您單擊了手動區域的一端或另一端一樣.

The solution I ended up going with is to create a "focus stealer" div (with tabindex = -1--can have the focus but can't be tabbed to initially) on either side of the area in which I want to manually manage the focus. Then I put a bubbling-true event listener for focus and blur on the whole area. When any focus occurs on the area, the tabindex values are changed to -1, and when any blur occurs, they're changed to 0. This means that while focused in the area, you can tab or shift-tab out of it and correctly end up on other page elements or browser UI elements, but as soon as you focus out of there, the focus stealers become tabbable, and on focus they set up the manual area correctly and shunt the focus over to the element at their end, as if you had clicked on one end or the other of the manual area.

這篇關于使用 JavaScript 模擬 tab 按鍵的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！