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