Javascript 当键盘在移动设备上可见时，jQuery/js/html5 更改页面内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11600040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery/js/html5 change page content when keyboard is visible on mobile devices
提问by Doua Beri
Possible Duplicate:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
I'm building a mobile version for a website, and I'm interested if I can create using jQuery/js/html5 or any other technology the same split screen effect that can be made on mobile apps when virtual keyboard is visible.
我正在为一个网站构建一个移动版本，我很感兴趣，如果我可以使用 jQuery/js/html5 或任何其他技术创建在虚拟键盘可见时可以在移动应用程序上制作的相同分屏效果。
For example if a user enters my webpage and clicks on an input text field, the virtual keyboard is showed and the browser automatically zooms to the area where the input text field is.
例如，如果用户进入我的网页并单击输入文本字段，则会显示虚拟键盘，浏览器会自动缩放到输入文本字段所在的区域。
What I want is to be able to change my page content the moment the virtual keyboard is visible based on the new resolution( screen height - keyboard height), by moving the input text field on top of the screen, followed by some tips depending on what the user enters in the text field.
我想要的是能够根据新的分辨率（屏幕高度 - 键盘高度）在虚拟键盘可见时更改我的页面内容，方法是将输入文本字段移动到屏幕顶部，然后是一些提示，具体取决于用户在文本字段中输入的内容。
Here are some sketches to see what I am talking about:
这里有一些草图，看看我在说什么：
This is the page view without keyboard, results based on the search:
这是没有键盘的页面视图，基于搜索的结果：
page with portrait keyboard, the logo disappears, the text input moves to top, and a max 4 items are shown
纵向键盘页面，logo消失，文字输入移至顶部，最多显示4项
page with landscape keyboard, the logo disappears, then input moves to top and is enlarged, only 2 items are shown
横向键盘的页面，标志消失，然后输入移动到顶部并放大，只显示2个项目
is the keyboard is hidden, the page should go to phase 1.
键盘是否隐藏，页面应该进入第 1 阶段。
Hope this helps.
希望这可以帮助。
回答by Yoann
I have tried a first solution for your problem by catching the resize event With that you can know the orientation and gest is the keyboard is visible
我已经通过捕获调整大小事件为您的问题尝试了第一个解决方案，这样您就可以知道方向和键盘是可见的
UPDATE: adding iOS mobile safari support with LKM solution
更新：使用LKM 解决方案添加 iOS 移动 Safari 支持
var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;
/* Android */
window.addEventListener("resize", function() {
is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);
updateViews();
}, false);
/* iOS */
$("input").bind("focus blur",function() {
$(window).scrollTop(10);
is_keyboard = $(window).scrollTop() > 0;
$(window).scrollTop(0);
updateViews();
});
Now you can show and hide the logo and some line item
现在您可以显示和隐藏徽标和一些订单项
function updateViews() {
$("li").hide();
if (is_keyboard) {
$("#logo").hide();
if (is_landscape) {
$("li").slice(0, 2).show();
}
else {
$("li").slice(0, 4).show();
}
}
else {
$("#logo").show();
$("li").show();
}
}
For the JS based on this HTML
对于基于此 HTML 的 JS
<div id="logo">Logo</div>
<input type="text"><input type="submit" value="search">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Check out my example page
查看我的示例页面
