0

我在 Bootstrap 模式中的 Blockly 工作区有问题。

一切似乎都运行良好，但我无法输入拖入工作区的输入。

对话框如下所示：

在此处输入图像描述

我无法在等号右侧输入突出显示的块。

我之前遇到过一个问题，如果在折叠的div. 我通过添加一个在单击Step Formulas时触发的事件并执行以下代码来解决此问题：

window.dispatchEvent(new Event('resize'));

我验证如果我将div工作区注入到主布局的 HTML 中，它工作正常。我可以打字。

有任何想法吗？

4

2 回答 2

0

不得不操纵 DOM 并对其进行重组。

这两个 div 是在 DOM 的根目录（主体级别）中生成的。将它们作为模态的子项移动解决了焦点问题。

$('.blocklyWidgetDiv').prependTo('.modal');
$('.blocklyTooltipDiv').prependTo('.modal');
于 2018-07-31T16:50:41.640 回答
0

前段时间我也偶然发现了这个问题，经过相当多的搜索找到了处理该问题的原因和解决方法。

出现问题的原因是，如果将焦点赋予不在其中的元素，则引导程序设置的事件侦听器之一会立即将焦点设置为引导程序模式。不幸的是，blockly 并没有在父模态 div 中创建该输入字段（尝试检查浏览器中的白色文本字段，您会看到它）。

有多种解决方法，但 IMO 最简单且对我来说效果很好的一种方法是tabindex在 HTML 中使用属性。

只需添加tabindex="-1"到具有引导程序modal类的 html 元素。给一个负值来tabindex移除标签顺序中的元素，这间接地解决了我们的问题。

<div class="modal" tabindex="-1">
    <--other stuff + blockly here-->
</div>

其他解决方法可以在这些链接上找到：link1 & link2

于 2018-07-28T13:06:15.640 回答