我正在构建一个AngularJS应用程序,在一个视图的底部有一个<textarea>。
iOS9上的移动Safari问题: 当聚焦在文本框时,软键盘会显示并覆盖视图的下半部分。
当键盘可见时,如何将页面向上滚动以使内容(即文本区域)不被覆盖?
我正在构建一个AngularJS应用程序,在一个视图的底部有一个<textarea>。
iOS9上的移动Safari问题: 当聚焦在文本框时,软键盘会显示并覆盖视图的下半部分。
当键盘可见时,如何将页面向上滚动以使内容(即文本区域)不被覆盖?
以下是防止页面滚动的一种方法。当输入框处于焦点状态时,将 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
,并将值设置为所需位置。