gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:21:29 25 4
gpt4 key购买 nike

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

当我点击

Click Here!!

折叠标题并选择文本区域,键盘出现但隐藏了文本输入框,因为它位于屏幕的下半部分。这会阻止用户看到他们正在输入的内容,也无法按“提交”,除非他们最小化键盘。

当键盘打开时,文本框应该向上移动,因此它位于键盘上方,并且页面应该是可滚动的。这是我期望的行为,也是 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>

最佳答案

这显然是 Android 上持续存在的问题。

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

此链接的答案是禁用页面的全屏模式。 (两次提到工作。)

关于javascript - Jquery Mobile 1.4.5 设备中的虚拟键盘隐藏页面底部的表单输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30264263/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com