使用JavaScript模拟标签按键 [英] Simulating a tab keypress using JavaScript

问题描述

我想让浏览器的行为就好像用户在点击某些东西时按Tab键。在点击处理程序中，我尝试了以下方法：

  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下给我发消息中的这些错误：

 权限被拒绝获取属性XULElement.popupOpen 
 [打破此错误] this.input.focus（）[0] .dispatchEvent（event）; 
 
拒绝获取属性的权限XULElement.overrideValue 
 [打破此错误] this.input.focus（）[0] .dispatchEvent（event）; 
 
拒绝获取属性的权限XULElement.selectedIndex 
 [在此错误上打断] this.input.focus（）[0] .dispatchEvent（event）; 
 
拒绝设置属性的权限XULElement.selectedIndex 
 [在此错误中打破] this.input.focus（）[0] .dispatchEvent（event）;我听说过（没有明确定义这样）事件是不信任的，这可能会解释这些错误。
 
 
 
第二种方法会导致我将事件的任何值作为事件传递给事件，但无效（即使我使用98而不是9，在框中不输入b。）如果我尝试在我传递的对象中设置event.data，则在触发事件时结束未定义。以下是我用来查看的代码：
  $（'＃hi'）。keypress（function（e ）{
 console.log（e）; 
}）; 
  
任何其他想法？
解决方案
我结束的解决方案是创建一个焦点窃取者div（与tabindex = -1  - 可以有焦点，但不能标签到最初）在我想手动管理焦点的区域。然后我把一个冒泡的事件监听器放在焦点和模糊的整个区域。当该区域发生任何焦点时，tabindex值将更改为-1，并且当发生任何模糊时，它们将更改为0.这意味着，在该区域中，您可以从该区域中选取或移出，正确地结束在其他页面元素或浏览器UI元素上，但是一旦您将焦点从焦点移出，焦点窃取者就可以被标注，并且在焦点上他们正确地设置了手动区域，并将焦点分散到最后的元素，好像您点击了手动区域的一端或另一端。
 
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);
And jQuery:
this.input.focus().trigger({ type : 'keypress', which : 9 });
...which I took from here.

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.

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);
});
Any other ideas?
解决方案
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模拟标签按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！