web-dev-qa-db-ja.com

iOS 7の仮想キーボードが存在する場合、div要素は下部にとどまりません

テキストボックスを押した後に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より前のバージョンで実行されていたときに動作していました。

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

Left side: Before. Right side: After

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

更新：

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"/>
htmlasp.netcssios7
36
Phu Minh Pham

[〜＃〜] edit [〜＃〜]：さて、別の可能な解決策を見つけました。次のようなHTMLメタタグを確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-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" />

これで問題は解決しました。ただし、アプリでCordovaを使用していることに注意してください。

別の可能な解決策：

Config.xml（おそらくresourcesディレクトリの下）を見ると、次のような行が表示されるはずです。

<preference name="KeyboardShrinksView" value="false" />

Trueに設定すると、フッターがソフトキーボードの上に移動しなくなります。ただし、これにより、ユーザーが入力しているテキストフィールドがキーボードによって隠されることもあります。

39
Opossum

#footerクラスbottom:0px;に犯人がいます。仮想キーボードの外観でbottomを任意の要素に指定すると、それらの要素はiOS 7で上に移動します。回避策はtopプロパティ。

5
Tanveer Shaikh

私は少し遅れていますが、これはうまくいきます：

var footer = $(".footer");
footer.css({ "top": footer.position().top, "bottom": "auto"});

これは、下にある固定要素または絶対配置要素を想定しています：some number元々。 javascriptスクリプト内の適切な場所（おそらくページの読み込み時に呼び出される関数）にこれを追加します。これはjQueryを使用しますが、javascriptに簡単に変換できます。これは基本的に、フッターを; bottom '値の代わりに' top '値によって関連付けられた下部に留まるように強制します。

3
user3718546

承認済みの回答は機能しますが、CSSを混乱させる可能性があるため、他の何かを使用する必要があります。それは私の修正ではありませんが、 インターネット で見つかりました。

HTML：

<body onResize="onResize();">

JavaScript：

function onResize(){
    var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7);
    if (ios7){
        var height = $('body').height();
        if (height < 350){ // adjust this height value conforms to your layout
            $('.myBottomMenu').hide();
        }
        else {
            $('.myBottomMenu').show();
        }
    }
}
3
Jaroslav

解決方法は次のとおりです。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です。これにより、1秒のフラッシュ用のツールバーが表示され、非表示になります。このちらつきを避けるために、ネイティブでコードを追加しました。MainViewcontroller.mのkeyboardshowイベントに登録し、init関数に次を追加します。

//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();
    }
}

このソリューションがuで機能するかどうかをお知らせください。

1
user3414060

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

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

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

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

document.addEventListener('focusout', function(e) { $('.bottom_bar').show();});
0
kavinhuh