安卓键盘如何隐藏文本输入

Question

我有一个使用jQuery Mobile的应用程序。

在Chrome（Android上）测试时，当键盘打开时，页面底部的某些输入框会自动移动到顶部。这是我期望的行为。

当我将此网站添加到我的Android主屏幕中时，此行为不起作用，并且所有文本输入框都被键盘隐藏了。

我还注意到，当我再次在Chrome上打开同一应用程序，并在Webview应用程序重试后，现在一切正常。输入框不再被隐藏。

您是否遇到过这种错误？

提前感谢。

- Emmanuel Demey

---

是的，Chrome for Android浏览器内置了这个功能。你能解释一下你所说的“当我将这个网站添加到我的Android主屏幕时”的意思吗？你所说的“主屏幕”是什么意思？ - Tasos

嗨，我的意思是这个功能：http://www.google.fr/imgres？imgurl=http://3.bp.blogspot.com/-WVDN3YkA-mM/Uk3-Cr9BxCI/AAAAAAABMzY/VHP4q1LvGZs/s640/chrome-add-to-home-screen.png&imgrefurl=http://googlesystem.blogspot.com/2013/10/add-shortcuts-to-web-apps-in-chrome-for.html&h=533&w=320&tbnid=9EBxZbIbExUlKM:&tbnh=90&tbnw=54&usg=__Uo48-XW-Hr6b3ZyrZumCjlOljnc=&docid=IzUfIFy96IKJKM - Emmanuel Demey

那个搜索框是否会随着向下滚动而出现在屏幕底部，还是总是在底部？无论如何，请查看我在答案中创建的演示，也许对您足够了解。否则，还有一些解决方法。 - Tasos

Answer 1

我为您创建了一个演示，作为另一种选择。

我不得不添加一个空白框来在底部创建一些空间，然后当您聚焦于输入框时将其移动到标题上方，因为它在底部所以没有滚动空间。

演示

https://jsfiddle.net/fyom081o/

代码

$(document).on("focus", "#text-basic", function(event){
    var boxheight =  $(window).height() - 40;
    $("#mycontntent").append("<div id='blank' style='height:"+boxheight+"px;'"+"></div>");
$('html, body').animate({scrollTop: $('#text-basic').offset().top - 100}, 500); 
});

$(document).on("focusout", "#text-basic", function(event){
$('#blank').remove();
});

- Tasos

---

我会试用你的演示。谢谢。但是非常奇怪的是，在Web应用模式下，使用Chrome访问相应的网站后一切正常。所以也许你的解决方案大部分时间都能运作，但有时我们需要在Web视图/键盘组件的默认滚动行为中添加你的空元素。 - Emmanuel Demey

Answer 2

请看我提出同样问题时的答案...

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

我向JQM提出了一个问题，这是我得到的回复。结果证明这是Chrome全屏浏览器的bug，与JQM无关...

我唯一能想到的解决方法是像http://jsbin.com/kagidi/9/edit?html,css,output这样尝试解决Chrome主屏幕上的问题，但这并不是一个完整的解决方案，它有一些无法解决的问题。

没有办法知道键盘的大小，因此也不知道要添加多少高度到body上，特别是当考虑到自定义键盘时更是如此。

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

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

- Janey