CanvasInput fails in fullscreen mode + solution

[finefin]

The CanvasInput did not work in fullscreen mode, so I had a look at the plugin file - in there I noticed that the new hidden inputs were appended to the main document.body

From phaser docs: A browser can only send one DOM element into fullscreen. You can control which element this is by setting the fullscreenTarget property in your game config, or changing the property in the Scale Manager.

So I edited the plugin that it checks for the fullscreenTarget property and appends the new input to that div if it exists. With these changes CanvasInput works in fullscreen mode as well.

   var CreateElement = function CreateElement(parent, config) {
    var element;
    var textType = GetValue$3(config, 'inputType', undefined);
    if (textType === undefined) {
      textType = GetValue$3(config, 'type', 'text');
    }
    if (textType === 'textarea') {
      element = document.createElement('textarea');
      element.style.resize = 'none';
    } else {
      element = document.createElement('input');
      element.type = textType;
    }
    var style = GetValue$3(config, 'style', undefined);
    // Apply other style properties
    var elementStyle = element.style;
    SetProperties(StyleProperties, style, elementStyle);
    // Set style
    elementStyle.position = 'absolute';
    elementStyle.opacity = 0;
    elementStyle.pointerEvents = 'none';
    elementStyle.zIndex = 0;
    // hide native blue text cursor on iOS
    elementStyle.transform = 'scale(0)';
    SetProperties(ElementProperties, config, element);

    // Don't propagate touch/mouse events to parent(game canvas)
    StopPropagationTouchEvents(element);

    // if fullscreenTarget exists, append input to parent div
    // to support input in fullscreen mode
    if (parent.game.config.fullscreenTarget) {
      document.getElementById(parent.game.config.fullscreenTarget).appendChild(element);
    } else {
      document.body.appendChild(element);
    }

    return element;
  };

Check out my tweaked version of the plugin rexcanvasinputplugin-tweaked.js.zip

The changes are in the functions CreateElement (line 4779) and RemoveElement (line 4828)

[rexrainbow]

CanvasInput class updated, please get latest version of minify file. Now parent element will be fullscreenTarget under full-screen mode

var parentElement = (scaleManager.isFullscreen) ? scaleManager.fullscreenTarget : document.body;

Reference

[finefin]

Works like a charm. Thank you!