Element.ALLOW_KEYBOARD_INPUT 在我的全屏模式下不工作

Question

我正在与 this as starter 合作 react.js 图片库项目。有一个 Settings 字段可以自定义图库性能。我在 Full screen mode 时在屏幕右侧显示此设置，如下图所示。

.

顺便说一下，这 2 个输入元素不能像被禁用一样工作。（单击鼠标，键入任何键盘），我无法对这些输入进行任何操作。

我知道在 Web 浏览器中使用全屏 API，出于安全原因，大多数键盘输入已在 Full screen mode 中被阻止。为了解决这个问题，我尝试在我的代码中使用 Element.ALLOW_KEYBOARD_INPUT。

fullScreen() {
    const { useBrowserFullscreen } = this.props;
    const gallery = this.imageGallery.current;

    if (useBrowserFullscreen) {
      if (gallery.requestFullscreen) {
        gallery.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (gallery.msRequestFullscreen) {
        gallery.msRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (gallery.mozRequestFullScreen) {
        gallery.mozRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if (gallery.webkitRequestFullscreen) {
        gallery.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      } else {
        // fallback to fullscreen modal for unsupported browsers
        this.setModalFullscreen(true);
      }
    } else {
      this.setModalFullscreen(true);
    }

    this.setState({ isFullscreen: true });
}

但没有解决问题。 Here is full source code git repository if you want to check current status.

请使用node 10.x.x到运行成功。查看错误的步骤如下：

点击屏幕底部的按钮移至 Full Screen Mode。
鼠标点击查看小菜单。
Select Setting 显示设置.
其他属性也适用，但不适用于 Input。

当我在 general mode 上时，没有 Full screen mode 并按照上述步骤操作，然后 Input 工作正常。

有解决这个问题的办法吗？

Answer 1

问题是 Setting Element 没有包含在 Image Gallery Element Dom 树中。 Full Screen Mode 适用于 Image Gallery Element，但 Setting Element 不属于树，因此不起作用。

把Setting改成Image Gallery后，Input就正常了。 Updated git repository

Element.ALLOW_KEYBOARD_INPUT 在我的全屏模式下不工作

Element.ALLOW_KEYBOARD_INPUT Does not work in my FullScreen Mode

javascript

browser

dom-events

reactjs