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

Question

问题

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

用例

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

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

如何防止出现默认值？

Answer 1

您可以使用 JS 直接在 HTML 中阻止默认浏览器操作。 Flutter 尚未实现使用框架触发此操作的方法（我怀疑他们会这样做，因为它是特定于 Web 的）。

如果您愿意，也可以使用 dart:html 库使用 Dart 代码代替。但是，直接在 Flutter web 应用程序的 index.html 中（在 <body> 标签中）包含以下 JavaScript 代码是最方便的：

<script>
  // This prevents default browser actions on key combinations.
  // See 
  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 中的默认浏览器快捷方式？

How do I disable Default Browser Shortcuts in Flutter Web?

html

javascript

flutter

flutter-web

问题

用例