mobile Safari: prevent scroll page when focus on input

Question

I'm trying to prevent scroll page when user tap on input:

<pre class="js-parent">
  <input value="tap to focuss" readonly>
</pre>

$("input").on("focus", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

$("input").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  this.setSelectionRange(0, 9999);
});

Few problems:

1) when user click on input page scroll to element (to the top of the page)

2) when focus is active, parent block lose position: fixed

demo

demo with code

Answer 1

You can trick safari into thinking that the current focused input is at the top of the page, so that no need to scroll down, by following trick:

$(document).on('touchstart', 'textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){

            var intv = 100;
            var $obj = $(this);

            if (getMobileOperatingSystem() == 'ios') {

                e.stopPropagation();

                $obj.css({'transform': 'TranslateY(-10000px)'}).focus();
                setTimeout(function(){$obj.css({'transform': 'none'});}, intv);
            }
            return true;
        });

You can find more details in following thread, which shows how to do this for android os, too.

jquery mobile How to stop auto scroll to focused input in Mobile web browser

Answer 2

Here is a Vanilla JS version based on the first answer. It prevents IOS & mobile Safari from scrolling the screen when the soft keyboard is opened via the focus event created when clicking into an input.

It works perfectly in iOS 15.2.1

It also works very well with the 'focus' event.

element.addEventListener('touchstart', (event) => {
    event.stopPropagation();
    element.style.transform = 'TranslateY(-10000px)'
    element.focus();
    setTimeout(function () { element.style.transform = 'none' }, 100);
});