Элемент Div не останется внизу, если присутствует виртуальная клавиатура ios 7

У меня возникла проблема с элементом div, чтобы придерживаться нижней части моего веб-приложения, когда появляется виртуальная клавиатура ios 7 после нажатия текстового поля.

У меня этот элемент 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

Нижний колонтитул прыгает выше виртуальной клавиатуры.

UPDATE:

Я изменил метатег, предоставленный 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" />

Extension

Это не является частью вопроса, но исправляет ошибки при работе на Android:) Любое решение для этого?

Решение: удалена максимальная шкала и целевая плотность Dpi, и теперь она работает как для IOS, так и для Android. Метатег теперь выглядит следующим образом:

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

Ответы

Ответ 1

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" />

Это исправило проблему для меня. Я должен отметить, что мое приложение использует Кордову, хотя.

Другое возможное решение:

Если вы посмотрите в файле config.xml(возможно, в каталоге ресурсов, вы увидите строку, которая гласит:

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

Если вы установите для этого значение true, он удерживает нижние колонтитулы от перемещения над мягкой клавиатурой. Однако это также приводит к тому, что клавиатура иногда закрывает текстовое поле, которое пользователь вводит.

Ответ 2

Там виновник в вашем классе #footer bottom:0px; Если вы даете bottom любому элементу, при появлении виртуальной клавиатуры эти элементы перемещаются вверх в iOS 7. Обходным путем является использование свойства top.

Ответ 3

Утвержденный ответ работает, но может испортиться с некоторым CSS, поэтому я должен использовать что-то еще. Это не мое исправление, но нашло его на internet, и это сработало для меня:

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

Ответ 4

Я немного опаздываю, но это хорошо работает:

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

Это предполагает фиксированный или абсолютно позиционированный элемент, который имеет нижнюю часть: некоторое число изначально. Добавьте это туда, где это уместно в ваших сценариях javascript (возможно, в функции, вызываемой при загрузке страницы). Это использует jQuery, но он легко переводится в javascript. Это в основном заставляет нижний колонтитул оставаться на дне, связанном с "верхним" значением, а не значением "bottom".

Ответ 5

Вот как мы это разрешили: кордова 2.9.0. Решение 1. Добавление метатегов viewport действительно разрешилось в некоторой степени, но не полностью. Решение 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, который имеет нижний колонтитул. Это покажет панель инструментов для вспышки секунды и спрячет ее, чтобы избежать этого мерцания, мы добавили некоторый код в native, 1. Зарегистрируйтесь для события keyboardshow в вашем MainViewcontroller.m. добавьте в функционирование init следующее:

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

2.add следующую функцию

-(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.

Ответ 6

В моем случае я использовал  для захвата события при вводе событий ввода текстовых полей и скрытия нижней панели используя

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

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

и захватить событие, когда клавиатура закрыта и отобразить клавиатуру с помощью

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

Ответ 7

Основная проблема в вашем свойстве класса CSS

сноска {}

Вы установили позицию "fixed" и z-index.

Укажите свойство позиции обработчика в соответствии с Iphone.