37

テキストボックスを押した後にios 7仮想キーボードが表示されたときに、div要素がWebアプリの下部に固執するという問題があります。

私はこのdiv要素を持っています:

....
        <div id="footer" style="text-align:center">
            <div id="idName"><img alt="SomeName" src="images/logo.png" /></div>
        </div>

    </form>
</body>

このスタイルを使用しています

#footer{
color:#CCC;
height: 48px;

position:fixed;
z-index:5;
bottom:0px;
width:100%;
padding-left:2px;
padding-right:2px;
padding:0;

border-top:1px solid #444;

background:#222; /* Old browsers */
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));  
background:    -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */    
background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
background:      -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
background:     -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
background:         linear-gradient(top, #999, #666 2%, #222); /* W3C */
}

テキストボックスを押すと、フッター要素が仮想キーボードの上にジャンプします。私のiDevicesがios 7より前のバージョンで実行されていたとき、それは機能していました。

左側がテキストボックスを押す前、右側がテキストボックスを押した後です。

左：前。 右側：後

フッターが仮想キーボードの上にジャンプします。

アップデート：

Opossum が提供するメタ タグを変更したところ、フッターが一番下に表示されるようになりました。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

拡大

これは質問の一部ではありませんが、修正により Android で実行すると問題が発生します :) そのための解決策はありますか?

解決策: maximum-scale と target-densityDpi を削除し、IOS と Android の両方で動作するようになりました。メタ タグは次のようになります。

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
4

7 に答える 7

1

これを解決した方法は次のとおりです: cordova 2.9.0. 解決策 1. ビューポート メタ タグを追加すると、ある程度は解決されましたが、完全には解決されませんでした。解決策 2。

$(document).on('focus','input, select, textarea',function() {
        if(OSName=== 'iOS' && ver[0] === 7){
                if($(this).attr('readonly')===undefined){
                        $('#footer').hide()
                }
         }
});
$(document).on('blur','input, select, textarea',function(){
             if(OSName=== 'iOS' && ver[0] === 7){
                   if($(this).attr('readonly')===undefined){
                   $('#footer').show();
                   }
              }
});

#footer は、フッターを保持する div の ID です。これにより、ツールバーが一瞬表示され、非表示になります。このちらつきを避けるために、ネイティブにコードを追加しました。

//fix for ios7 footer is scrolled up when the keyboard popsup.
        [[NSNotificationCenter defaultCenter] addObserver:self
                                                 selector:@selector(keyboardWillShow:)
                                                     name:UIKeyboardWillShowNotification
                                                   object:nil];

2.以下の機能を追加

-(void)keyboardWillShow:(NSNotification*)notification{
    //call the javascript to hide the footer.
    //fix for ios7 footer is scrolled along wiht the content when the keyboard comesup.
    if (IsAtLeastiOSVersion(@"7.0")){
        [self.webView stringByEvaluatingJavaScriptFromString:@"()"];
    }
}

3.jsファイルに関数を追加します

//Fix for footer is misalligned when the virtual keyboard pops up ios7
//check for device is iPhone and os version is 7
function hideFooter(){
    if(OSName=== 'iOS' && ver[0] === 7){
        if($(this).attr('readonly')===undefined)
            $('#footer').hide();
    }
}

この解決策がうまくいくかどうかお知らせください。

于 2014-03-13T06:55:56.247 に答える
0

私の場合、入力テキストフィールドイベントに入力し、下のバーを非表示にするときにイベントをキャプチャしていました

if($(event.target).hasClass("inputtextfield")){

        $('.bottom_bar').hide();}

キーボードが閉じられたときにイベントをキャプチャし、使用してキーボードを表示します

document.addEventListener('focusout', function(e) { $('.bottom_bar').show();});
于 2014-02-06T20:03:48.407 に答える