相关疑难解决方法(0)

是否可以在JavaScript中以编程方式模拟按键事件？

我在.net页面上有一些文本框,并希望用jQuery实现以下功能:如果用户按下返回,程序应该"好像"他使用了tab键,因此,选择下一个元素.我尝试了以下代码(还有一些代码):

<script type="text/javascript">

jQuery(document).ready(function () {

    $('.tb').keypress(function (e) {
        if (e.keyCode == 13)
        {
            $(this).trigger("keydown", [9]);
            alert("return pressed");
        } 
    });
});

<asp:TextBox ID="TextBox1" runat="server" CssClass="tb"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="tb"></asp:TextBox>

但它只是不起作用!错过了什么,弄错了？

这里有一些我用过的链接

这里

和这里

在jQuery中,如何触发用户标签到下一个输入字段的行为？

我试过这个:

var e = jQuery.Event("keydown");
e.which = 9; // # Key code for the Tab key
$("input").trigger(e);

但是触发事件不会将光标移动到下一个字段.

我想我可以手动移动光标focus(),但是决定接下来应该是哪个字段是浏览器已经知道该怎么做的事情,所以触发标签似乎更清晰.

有任何想法吗？

我正在编写一个单元测试来测试我的网页上的Tab键顺序,我找不到一种方法来模拟用户键入TAB键以关注下一个可聚焦元素,尽管这似乎是一项简单的任务.

允许使用jQuery,而首选纯javascript解决方案.任何形式的帮助表示赞赏.

// TODO
function triggerTab () {


}

$("#btn-save").focus();
triggerTab();

// Expect the focus is on the cancel button now.
console.log(document.activeElement.id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p> some text </p> 
<button id="btn-save"> save </button>
<button id="btn-cancel> cancel </button>

PS在下一个可聚焦元素上调用focus()是不可接受的,即使你可以编写代码来找出下一个可聚焦元素.所以这条路不是我想要的:

function getAllFocusables () {
    ...
}

var focusables = getAllFocusables(),
    index = focusables.indexOf(document.activeElement);

$(focusables[index+1]).focus();

我有一个带有输入元素的组件，我想在该输入元素上触发“选项卡”按键事件，以便在发生一组特定逻辑时跳转到下一个输入元素。

我在第一个输入元素上有一个引用，我正在尝试触发按键事件，如下所示：

useEffect(() => {
  if (ref.current) {
    ref.current.focus();
    setTimeout(() => {
      ref.current.dispatchEvent(
        new KeyboardEvent("keypress", { key: "Tab" })
      );
    }, 3000);
  }
});

首先，我确保使用 选择第一个输入元素.focus()，然后 3 秒后我触发按下 Tab 键，期望看到焦点移动到下一个字段，但它似乎不起作用。

这可能看起来是一个奇怪的例子，但这只是一个原型。我实际上打算做的是，当我提交第一个输入字段时触发一些代码，这将获取一些带有附加输入字段的行，一旦呈现，我需要触发“tab”键。我想避免将引用附加到这些动态加载的输入字段，因为我觉得这会增加大量开销来跟踪引用并将其向下传递，而我所需要的只是利用选项卡顺序并模拟按键来选项卡到加载后第一个动态加载的项目。我可以向您需要提交以填充动态字段的字段添加单个引用。

我注意到一些在线.dispatchEvent()直接调用 ref 对象的例子，但是如果我尝试这样做，我会收到一条错误消息，告诉我该函数不存在，所以我在 prop 上调用它current。不确定这是否有任何相关性。

以下是上述代码取自的原型链接：https://codesandbox.io/s/wizardly-hopper-vrh4w ?file=/src/App.js:149-441