我写了一个相当基础的js函数,可以自动程序化地使每个输入框在聚焦时完美地对齐iPhone键盘(如果你喜欢,可以使用它!)。对齐主要由window.scroll处理 - 这是一种标准方法,在任何浏览器视图中都有效,但在UIWebView中不起作用,因此需要一个解决方法(phonegap/cordova 2.1)。所以我需要一个解决方法。
我的工作代码:
我的工作代码:
function setKeyboardPos(tarId) {
//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield
var elVerticalDistance = $("#"+tarId).offset()["top"]; //i.e. 287
var keyboardHeight = 158;
var heightOfView = document.height; // i.e. 444
var inputHeight = $("#"+tarId).outerHeight();
var viewPortSpace = heightOfView-keyboardHeight; //i.e. 180
var verticalNewSroll = (elVerticalDistance+inputHeight)-viewPortSpace;
if(verticalNewSroll<0) { verticalNewSroll = 0; }
////
//OK, all done lets go ahead with some actions
$("#footer").hide(); //hide footer so that the keyboard doesn't push it on top of textfield
$("#containingDiv").css("bottom","0px"); //remove bottom space for footer
window.scrollTo(0,verticalNewSroll); //scroll! where the problem starts
}
在除了UIWebView之外的所有地方工作,也就是说。正如我上面提到的,除了window.scrollTo之外,一切都有效(注意:为了清晰起见做了一些小修改)。那么有人知道替代方案或者好的解决方法吗?
类似的问题
在iOS的phonegap中window.scrollTo不起作用
PhoneGap / Cordova scrollTo被忽略
以上还有三个类似的问题,有点指向正确的方向。其中一个回答者提到使用CSS来完成这个任务。有没有人能提供更具体的例子呢?另一个人建议使用锚点,但这不是一个非常好的解决方案,也不能很好地与我的其他代码配合使用。