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

标签 javascript android html css forms

我有一个简单的 HTML 表单,其中输入元素(文本框)位于页面中央。问题出在移动设备(特别是 Android)上,当键盘出现时,它会覆盖其中的一些元素。即使我在填写表格时点击下一步,页面也不会滚动以显示隐藏的元素。有什么建议么?我可以添加一些 JavaScript 或 CSS 吗?

最佳答案

尝试使用 onfocus javascript 事件。如果您使用 JQuery,则可以使用此示例,如果设备是触摸屏设备,它会在每个输入焦点事件中将输入滚动到视口(viewport)的最顶部。

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

关于javascript - Android 键盘覆盖 Web 表单上的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34214359/

相关文章:

javascript - 从 promise then() 返回

android - Trigger.io 和 Kendo UI Mobile - 布局/ View 在触摸之前不会显示

android - 尽管已授予权限,但仍获得安全异常

jquery - 如何使用 Jquery 对图像进行平滑的自动放大?

javascript - 使用 ShinyBS 实现 Shiny 的响应式(Reactive)工具提示BS

javascript - 导航事件类无法在服务器上运行

javascript - (Angular-ui-router) 在解析过程中显示加载动画

javascript - 部署 Cloud Functions for Firebase 是否需要节点

javascript - 如何停止服务器发送的事件

java - 检测一维 Java 数组中局部最大值的一般模式