3

私はかなり基本的な 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 以外はすべて機能します (わかりやすくするためにいくつかの小さな変更が加えられています)。では、代替ソリューションまたは適切な回避策を知っている人はいますか?

類似の質問

window.scrollTo が IOS の phonegap で機能しない

PhoneGap / Cordova s​​crollTo 無視

Phonegap で縦スクロールを追加する方法

上記のさらに 3 つの同様の質問は、1 つを正しい方向に向けています。回答者の 1 人は、これを達成するための css の使用について言及しています。誰かもっと具体的な例を思いつくことができますか? 別の人がアンカーを提案していますが、それはあまりきれいな解決策ではなく、私のコードの残りの部分とうまくいきません。

4

3 に答える 3

4

いくつかの調査を行った後、window.scrollTo() が phonegap 2.1 を使用する iOS6 で実際に動作することに気付きました。何らかの理由で、document.height は UIwebView 内で同じ比率のプロパティを生成しなかったため、小さな回避策を作成する必要がありました。今後の参考のために、ソリューションとコード全体を以下に掲載します。

function setKeyboardPos(tarId) {

//programmatically: set scroll pos so keyboard aligns perfectly underneath textfield
var elVerticalDistance = $("#"+tarId).offset()["top"];
var keyboardHeight = 157;

if(isNativeApp()) { keyboardHeight = 261; } //I choose to change the keyboard height for the sake of simplicity. Obviously, this value does not correnspond to the actual height of the keyboard but it does the trick
var keyboardTextfieldPadding = 2;
var heightOfView = document.height;
var inputHeight = $("#"+tarId).outerHeight();

var viewPortSpace = heightOfView-keyboardHeight-keyboardTextfieldPadding; //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); // perform scroll!

}

function isNativeApp() {

var app = (document.URL.indexOf('http://') === -1) && (document.URL.indexOf('https://') === -1);
if (app) {
    return true; // PhoneGap native application
} else {
    return false; // Web app / safari
}

}
于 2012-12-10T20:04:11.870 に答える
1

animate および scrollTop プロパティを使用してスクロールすることができます。次のようになります。

$("html, body").animate({ scrollTop: "The value to scroll to" });

お役に立てれば。

于 2012-12-10T07:47:02.253 に答える
0

これを使用するだけです：

$(window).scrollTop(0);
于 2012-12-12T11:49:03.290 に答える