在移动Safari中显示键盘时，防止屏幕向上滚动

Question

I'm building an Angularjs app that has a at the bottom of one view.

Problem in mobile safari on iOS9: When focusing the textarea the soft keyboard is shown and covers the lower part of the view.

How can I scroll the page up when the keyboard is visible so that the content (ie the textarea) is not covered?

Answer 1

Here is one way you might prevent scrolling. Add overflow:hidden to the document body 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; } 

To scroll the page up, you could use document.body.scrollTop when the inputs are in focus and set the value to the desired location.