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