Jquery Mobile 1.4.5 设备中的虚拟键盘隐藏了页面底部的表单输入

Question

我正在使用 JQuery Mobile 1.4.5 构建网络应用程序。在 Android (v.4.4.2) 中使用 Google Chrome 主屏幕（全屏）模式时，我发现了一个问题，我确定是浏览器或 JQM 错误。

当我点击

Click Here!!

可折叠header和select文本区域，出现键盘但隐藏文本输入框，因为它在屏幕的下半部分。这会阻止用户看到他们正在输入的内容，也无法按 "Submit"，除非他们最小化键盘。

当键盘打开时，文本框应该向上移动，所以它位于键盘上方，页面应该可以滚动。这是我期望的行为，也是 Chrome 网络浏览器模式和 iOS 全屏和浏览器模式下发生的情况。

对此工作轮有任何想法吗？它会使应用程序的某些部分无法使用！

<!DOCTYPE html>
 <html>
    <head>
      <title>Test Page</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png" /> 
        <link rel="shortcut icon" href="apple-touch-icon.png" />
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/>

        <script src="./js/jquery.js"></script>
        <script src="./js/jqm1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.external-png-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.inline-png-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.inline-svg-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile-1.4.5.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/Theme.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.icons-1.4.5.min.css">
        <link rel="stylesheet" href="./css/jqm1.4.5/jquery.mobile.structure-1.4.5.min.css">

</head>
<body>
    <div data-role="page" id="index" data-theme="a" >
        <style>
        .ui-title {
          margin: 0em 15% 0em !important;
        }
        </style>
        <div data-role="header" data-theme="a" data-position="fixed" style="min-height: 40px;">
            <a href="#navigation" style="margin-left: 3px; margin-bottom: 3px;" data-icon="bars" data-iconpos="notext">Navigation</a>

                    <h1 style="white-space:normal;">test</h1>


                <a href="#search" style="margin-right: 3px; margin-bottom: 3px;" data-icon="search" data-iconpos="notext">Search</a>
        </div><!-- /header -->



        <div data-role="content">


            <div data-role='collapsible-set' data-corners='false' >
                    <div data-role='collapsible' data-theme='b' data-collapsed='false'><h2>1</h2>
                    </div> <!-- collapsible end -->

                    <div data-role='collapsible' data-theme='b'><h2>2</h2>          
                    </div> <!-- collapsible end -->

                    <div data-role='collapsible' data-theme='b'><h2>3</h2>
                    </div> <!-- collapsible end  -->

                    <div data-role='collapsible' data-theme='b'><h2>4</h2>
                    </div> <!-- collapsible end  -->

                    <div data-role='collapsible' data-theme='b'><h2>5</h2>
                    </div> <!-- collapsible end -->

                    <div data-role='collapsible' data-theme='b'><h2>6</h2>
                    </div><!-- collapsible end -->  

                    <div data-role='collapsible' data-theme='b'><h2>7</h2>
                    </div><!-- collapsible end  -->


                    <div data-role='collapsible' data-theme='b'>
                        <h2>Click Here!!</h2>
                            <form>
                                <textarea cols='40' rows='auto' style='height:100px;' name='newNotes' id='newNotes'></textarea>     
                                <input type='submit' id='Submit'  value='Update' class='ui-btn ui-btn-c ui-btn-inline' data-theme='c' data-transition='pop' />
                            </form>
                    </div><!-- collapsible end -->

            </div> <!-- close collapsible set -->   
        </div><!-- /content -->
    </div><!-- /page -->
</body>

Answer 1

这显然是 Android 上的一个持续问题。

https://github.com/jquery/jquery-mobile/issues/1079

这个link的答案是禁用页面的全屏模式。（作为工作被提及两次。）

Answer 2

我用 JQM 打开了一个问题，这是我得到的响应。结果是 Chrome 全屏浏览器错误，与 JQM 无关...

我认为尝试解决此问题的唯一方法是 http://jsbin.com/kagidi/9/edit?html,css,output 之类的方法，它修复了 chrome 主屏幕上的问题，但这并不是真正的完整修复，它有一些问题真的解决不了

无法知道键盘的尺寸，也无法知道机身的高度，在特定设备上更是如此，当您牢记自定义键盘时。

需要大量的 userAgent 嗅探才能使其正常工作

由于这些问题，我认为这并不是我们要添加到库中的东西。然而，这可能会解决您的问题

Jquery Mobile 1.4.5 设备中的虚拟键盘隐藏了页面底部的表单输入

Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page

html

javascript

jquery

android

jquery-mobile