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

Android键盘覆盖Web表单上的元素

1 个答案: