Question

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

一切似乎都可以正常工作，但是我无法输入拖动到工作区中的输入。

这是对话框的样子：

我不能在等号右边键入突出显示的块。

我以前有一个问题，如果在折叠的div中渲染工作空间，将无法显示。我通过添加一个事件来解决此问题，该事件在单击 Step Formulas 时触发并执行以下代码：

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

我验证了是否将工作区注入到主布局的HTML中的div可以正常工作。我可以输入。

有什么想法吗？

Answer 1

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

之所以会出现此问题，是因为，如果焦点集中在其中的某个元素之外，则引导程序设置的事件侦听器之一会立即将焦点设置为引导程序模式。不幸的是，无法在父模式div内创建该输入字段（尝试在浏览器中检查白色文本字段，您会看到它）。

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

只需将tabindex="-1"添加到具有引导程序modal类的html元素中即可。为tabindex赋予负值会从制表符顺序中删除该元素，从而间接解决了我们的问题。

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

可以在以下链接上找到其他解决方法：link1和link2

Answer 2

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

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

$('.blocklyWidgetDiv').prependTo('.modal');
$('.blocklyTooltipDiv').prependTo('.modal');