Клавиатура Android покрывает элементы на веб-форме

Question

У меня есть простая форма HTML, в которой элементы ввода (текстовые поля) находятся по центру страницы. Проблема связана с мобильными устройствами (в частности, Android), когда клавиатура подходит, она охватывает некоторые из этих элементов. Даже когда я нажимаю следующий, заполняя форму, страница не просматривает, чтобы показать скрытые элементы. Какие-либо предложения? Есть ли JavaScript или CSS, которые я могу добавить?

Answer 1

Попробуйте использовать событие onfocus javascript. Если вы используете JQuery, вы можете использовать этот образец, который, если устройство является устройством с сенсорным экраном, прокручивает входные данные в самый верх окна просмотра на каждом событии фокуса ввода.

function isTouchDevice() { 
    try { 
    document.createEvent("TouchEvent"); 
    return true; 
    } catch (e) { 
    return false; 
    } 
} 

$("input").focus(function(){ 
    if(isTouchDevice()){ 
     $('html, body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1000); 
    } 
})