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



问题

如果我在Flutter web应用程序中实现CTRL+和<kbd]CTRL>+-的快捷方式,浏览器默认情况下仍将缩放。当我覆盖shorcuts时,我想阻止浏览器这样做。

用例

当我有自己的自定义快捷方式行为(例如使用Shortcuts(时,我不希望浏览器仍然对其做出响应,但无法阻止Flutter本身的默认操作。

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


如何防止默认值?

您可以使用JS直接阻止HTML中的默认浏览器操作。Flutter还没有实现使用该框架触发这一点的方法(我怀疑他们会这样做,因为它是特定于网络的(。


如果您愿意,也可以使用Dart代码,使用dart:html库来完成此操作。但是,最方便的做法是在Flutter web应用程序的index.html中(在<body>标签中(直接包含以下JavaScript代码:

<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>

正如你所看到的,我添加了一些例子,比如受Rive启发的CTRL+D等人。

此外,我添加了一个片段,防止在按退格键时返回到上一个选项卡。如果您想在文本输入之外使用退格键作为删除的快捷方式,则使用这种方法。

最新更新