以编程方式调用模糊会禁用与浏览器窗口的交互

Programmatically calling blur disables the interaction with the browser window

本文关键字:浏览器 窗口 交互 方式 编程 调用 模糊      更新时间:2023-09-26

我的实现在模态屏幕上具有以下组件。

  • 将用于搜索的表单。
  • 用户将在其中查看结果的表

用户将能够使用键盘(使用向上箭头或向下箭头)搜索并滚动结果列表。

当用户按回车键进行搜索时,我会模糊焦点字段...当我模糊焦点字段时,用户失去了使用向上箭头或向下箭头滚动浏览器窗口的能力......为了重新启用此默认浏览器行为,用户应该在他的键盘上按一次 tab...

我的问题是:

如何以编程方式重新启用浏览器导航?

PS.:我在这里提到的默认浏览器导航是当您点击键盘上的向上或向下箭头时发生的行为。

任何帮助真的非常感谢。提前谢谢你


编辑:

以下代码片段描述了我的方案http://plnkr.co/edit/YCvfQt?p=preview

$scope.onSubmit = function() {
    $scope.dataSource.push({ name: $scope.personName });
    $('#personNameField').blur();
};

场景(您应该只使用键盘进行复制):

  • 在实时预览中,单击"打开"使用键盘,您应该写一些东西并按回车键(不要点击屏幕)
  • 单击回车键后,尝试滚动列表
  • 您会注意到这是不可能的(您可以滚动如果您按一次 Tab 再次)

我在这里要做的是在用户点击回车后再次启用滚动......

如果您需要更多背景信息,请告诉我。谢谢

事实证明,我们只需要关注屏幕上的主要元素......在这种情况下,模态....

对于我的例子,这将是:

$('#myModal').focus();

感谢您的评论