Prevent scrolling screen when displaying keyboard in mobile Safari

Question

I am creating an Angularjs application that has the bottom of one view.

Problem in mobile safari on iOS9: When focusing the text field, a soft keyboard is displayed and the bottom of the image is closed.

How do I scroll up a page when the keyboard is visible so that the content (i.e. text box) is not closed?

Answer 1

Here is one way to prevent scrolling. Add overflow:hiddento the body of the document when your inputs are in focus.

    function toArray (collection) {
        return Array.prototype.slice.call(collection);
    }

    function noScroll (event) {
        if (event.type === 'focus') {
            document.body.classList.add('no-scroll');
        }

        else if (event.type === 'blur') {
            document.body.classList.remove('no-scroll');
        }
    }

    var inputs = toArray(document.querySelectorAll('input'));


    inputs.forEach(function(input){
        input.addEventListener('focus',noScroll,false);
        input.addEventListener('blur',noScroll,false);
    });

.no-scroll {
    overflow:hidden;
}

Run code

, document.body.scrollTop, .