javascript - mobile Safari: prevent scroll page when focus on input - Stack Overflow

admin管理员组

文章数量:1397093

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

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

• javascript
• jquery
• ios
• css
• safari

Share Improve this question Follow edited Jun 26, 2016 at 15:07 Pavel asked Jun 24, 2016 at 16:11 PavelPavel 2,19344 gold badges2424 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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);
});

本文标签： javascriptmobile Safari prevent scroll page when focus on inputStack Overflow