HTML Input shifts game canvas up on iOS

Hey all,

I’m building off of Cem’s HTML UI. I’ve been having trouble with one issue. On mobile, iOS shifts everything up whenever it focuses on an input field. In order to prevent it moving the html input element off the canvas, I need to prevent the default behavior. Thats where something like this should come in handy:

event.preventDefault();

but whenever I call this function on the “onfocus” event in the code below… the console tells me it “cannot read properties of null (reading 'preventDefault')”. Despite that not working, I am still able to bind other events to the “onfocus” event. Does anyone have any ideas on why that is happening? Here is the code in question:

this.element = document.createElement('input');

document.body.appendChild(this.element);
if(this.focusEntity){
        // this line produces an error
        this.element.onfocus.preventDefault();
        // these lines work perfectly and bind the correction functions
        this.element.onfocus = this.onFocus.bind(this);
        this.element.onblur = this.onBlur.bind(this);
}

Any ideas why that would not allow me to prevent the default behavior in that manner? Thanks in advance. If anyone has any ideas on how to prevent this in general please let me know.

did you mean this?

const form = document.getElementById('form');

form.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';
///////////////////////
event.preventDefault()
//////////////////////
}, true);

form.addEventListener('blur', (event) => {

  event.target.style.background = '';
///////////////////////
event.preventDefault()
//////////////////////
}, true);
1 Like

Isn’t the reason it moves it up is so the input field doesn’t end up underneath the on screen keyboard? If you prevent that you might not be able to see the input field?

1 Like

@jejelee98 Yes that is what I meant. Thank you I’ve gotten that to fire but it doesn’t seem that prevent default is doing what I thought it’d do. Back to the drawing board. Thanks for the help

@Kulodo133 Yes that is the reason but in our use case its being iFramed in somewhere very specific on the parent page so we don’t want it to shift the viewport like it does now.

How about this from stack overflow cordova - How to prevent keyboard push up webview at iOS app using phonegap - Stack Overflow ie adding these to the input element focus event listener?

    e.preventDefault();  
    e.stopPropagation();
    window.scrollTo(0,0);

No that doesn’t stop it sadly.

Here is a demo video in case it wasn’t obvious what I was talking about:

Is the problem the fact that the html input field no longer lines up with the playcanvas UI element when the keyboard is active, or that you just don’t want it to scroll? They are both scrolling but to different amounts.

I do not want it to scroll at all.

I’m not sure I could fix it but a demo project might help.

I had a look using the UI components project as an example. I didn’t find a proper way to stop the web page bring scrolled up when a field is focused. However, the window.scrollTo(0,0); trick does work but it causes flickering as it is conflicting with the scroll up during the keyboard opening transition.

The best solution if you can is to move the input fields closer to the top of the canvas and then iOS won’t try and scroll the page up if they are far enough away from the on screen keyboard.

1 Like

@Kulodo133 would you mind posting an example where the window.scrollTo(0,0) works? I still have not been able to replicate the behavior you are describing.

I wonder if the best way to go about this in general (if you know it will be on mobile) is to replicate the wordle keyboard and cut out html completely.

@Jake_Johnson

Take a look at the login scene.
I tried some tricks to minimise the scrolling flickering such as an outer frame element and inner frame element, but this just replaces that with another slightly better flicker.
To be honest, this is bad solution, and if you have an alternative to to using html input field and the native iOS keyboard that would be better. Also I not at all an expert on this, I just tried tried some of the stack overflow suggestions so it’s possible that there is a better solution.

https://playcanvas.com/project/942495/overview/fork-uicomponents
https://playcanvas.com/editor/code/942495?tabs=87590469,87526715

1 Like