jquery的移动1.4.5虚拟键盘在所述设备在页面底部隐藏表单输入 [英] Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page
问题描述
我使用jQuery 1.4.5移动建立一个Web应用程序。我发现我使用谷歌浏览器主屏幕（全屏）模式的Android（v.4.4.2）时敢肯定，要么是一个浏览器或JQM错误的问题。
I'm using JQuery Mobile 1.4.5 to build a web app. I have found an issue which I'm sure is either a browser or JQM bug when using Google Chrome homescreen (fullscreen) mode in Android (v.4.4.2).
当我点击
点击这里！
可折叠头和选择文本区，键盘显示，但它隐藏在文本输入框，因为它是在屏幕的下半部分。这$ P $从能够看到他们正在输入的内容pvents用户，并从pressing提交，除非他们尽量减少键盘。
collapsible header and select the text area, the keyboard appears but it hides the text input box, because it is on the lower half of the screen. This prevents the user from being able to see what they are typing, and from pressing "Submit", unless they minimise the keyboard.
当键盘打开，文本框应该被移动，所以它位于键盘上方，并且页面应滚动。这是我期望的行为，并在Chrome网络浏览器模式发生了什么，而在iOS的全屏幕和浏览器模式。
When the keyboard opens, the textbox should be moved up, so it sits above the keyboard, and the page should be scrollable. This is the behaviour I expect and is what happens in Chrome web browser mode, and in iOS full screen and browser mode.
在工作一轮任何想法？它使应用程序的部分不可用！
Any ideas on a work round for this? It makes sections of the app unusable!
<!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>
推荐答案
我打开与JQM的一个问题，这是我得到的回应。原来这是一个Chrome的全屏浏览器错误，无关JQM ...
I opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM...
我能想到的唯一办法试图解决这个会是这样的 http://jsbin.com/kagidi/9/edit?html,css,output 它修正对铬主屏幕上的问题，然而，这是不是真的有那个不能真正得到解决的几个问题的完整修复。
The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a complete fix it has a few issues that cant really be solved.
有没有办法知道键盘的大小，有多大的高度，以补充人体，在特定设备上更是这样，当你记住的自定义键盘。
There is no way to know the keyboard size, and there for how much height to add to the body, on a particular device even more so when you keep in mind custom keyboards.
它需要很多的userAgent嗅探，使其正常工作
It requires a lot of userAgent sniffing to make it work properly
由于这些问题，这不是真正的东西，我们会添加到库中，我不认为。然而，这可能会解决您的问题。
Because of these issues this is not really something we would add to the library i don't think. However this may solve your issue
这篇关于jquery的移动1.4.5虚拟键盘在所述设备在页面底部隐藏表单输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
