Question

问题

如果我在我的 Flutter web 应用程序中实现了 CTRL + + 和 CTRL + - 的快捷方式， 浏览器仍会默认缩放。当我覆盖快捷方式时，我想阻止浏览器这样做。

用例

当我有我的自定义快捷方式行为（例如使用 Shortcuts）时，我不希望浏览器仍然响应它，但没有办法阻止 Flutter 本身的默认操作。

另一个例子是 CTRL + D，它在 Firefox 中创建一个书签。我想在我的 Flutter 网络应用中使用复制的快捷方式。

如何防止默认设置？

Answer 1

您可以使用 JS 直接在 HTML 中阻止默认浏览器操作。 Flutter 还没有实现使用框架来触发这种情况的方法（我怀疑他们会这样做，因为它是特定于网络的）。

如果您愿意，也可以使用 dart:html 库，使用 Dart 代码来执行此操作。但是，将以下 JavaScript 代码直接包含在 Flutter 网络应用程序的 index.html 中（在 <body> 标记中）最为方便：

<script>
  // This prevents default browser actions on key combinations.
  // See https://stackoverflow.com/a/67039463/6509751.
  window.addEventListener('keydown', function(e) {
    if (event.target == document.body) {
      // Prevents going back to the previous tab.
      if (event.key == 'Backspace') {
        event.preventDefault();
      }
    }
  
    if (event.metaKey || event.ctrlKey) {
      switch (event.key) {
        case '=': // Prevent zooming in.
        case '-': // Prevent zooming out.
        case 'd': // Prevent bookmark on Firefox e.g.
        case 'g': // Prevent open find on Firefox e.g.
        case 'z': // Prevent restoring tab on Safari.
          event.preventDefault();
          break;
      }
    }
  });
</script>

如您所见，我添加了一些示例，例如 CTRL + D 等。灵感来自 Rive。

此外，我添加了一个片段，可防止按退格键返回上一个选项卡。用例是如果您想使用退格键作为删除文本输入之外的快捷方式。

如何在 Flutter Web 中禁用默认浏览器快捷方式？

问题

用例

1 个答案: