在移动版Safari中，当键盘弹出时防止屏幕向上滚动

Question

在移动版Safari中，当键盘弹出时防止屏幕向上滚动

javascriptiosangularjsmobile-safariios9

4

我正在构建一个AngularJS应用程序，在一个视图的底部有一个<textarea>。

iOS9上的移动Safari问题：当聚焦在文本框时，软键盘会显示并覆盖视图的下半部分。

当键盘可见时，如何将页面向上滚动以使内容（即文本区域）不被覆盖？

- beeches

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- colecmc · Answer 1

以下是防止页面滚动的一种方法。当输入框处于焦点状态时，将 overflow:hidden 添加到文档主体中。

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

要将页面向上滚动，您可以在输入框处聚焦时使用document.body.scrollTop，并将值设置为所需位置。