Estoy teniendo un problema con un elemento div que se adhieren a la parte inferior de mi web app cuando ios 7 teclado virtual aparece después de pulsar un cuadro de texto.

Tengo este elemento div:

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

    </form>
</body>

Utiliza este estilo

#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 */
}

Y cuando presiono en el cuadro de texto, el pie de página elementer salta por encima del teclado virtual.
Se utiliza para trabajar cuando mi iDevices se ejecuta en las versiones anteriores a ios 7.

En el lado izquierdo es antes de pulsar en el cuadro de texto y en el lado derecho es después de pulsar el cuadro de texto.

Elemento Div no se queda en la parte inferior cuando ios 7 teclado virtual está presente

El pie de página saltos por encima del teclado virtual.

ACTUALIZACIÓN:

He cambiado la etiqueta meta proporcionada por la Zarigüeya y ahora el pie de página se queda en la parte inferior:

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

Extensión

Esto no es una parte de la pregunta, pero la corrección de los tornillos de las cosas cuando se ejecuta en Android 🙂
Alguna solución para eso?

Solución: se quitó el máximo de la escala y el objetivo de densityDpi y ahora funciona tanto para IOS y Android. La etiqueta meta ahora este aspecto:

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
  • Hay dos problemas con la configuración de la etiqueta meta a la altura=dispositivo de altura. 1) La barra de estado de las necesidades de 20px. Si usted proporciona 20px desde el webview en la aplicación, usted tendrá una página web que contiene 20px debajo de la pantalla. Significado: que siempre se obtiene un desplazamiento, no importa qué tan poca info que hay en la página. 2) Cuando el teclado está arriba, se puede llegar al elemento fijo por el desplazamiento de la 548px (iPhone 5 y posteriores) a la parte inferior. Esta no era la forma en que solía ser.

7 Comentarios

  1. 39

    EDITAR: Bueno, he encontrado otra solución posible. Compruebe el código html de meta tags para algo como esto:

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

    Reemplazarlo con este:

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

    Esta solucionado el problema para mí. Debo señalar que mi aplicación es el uso de Córdoba, aunque.

    Otra posible solución:

    Si usted mira en config.xml (probablemente bajo el directorio de recursos, verá una línea que dice:

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

    Si se establece que a la verdad, mantiene los pies se muevan por encima del teclado. Sin embargo, esto también hace que el teclado a veces cubren el campo de texto que el usuario está escribiendo.

    • Tal vez estoy swining y falta aquí, pero esta revisión es una aplicación para iOS. Como he leído, el cartel tiene su aplicación en una página web?
    • No lo siento, esto es una página web que actúa como una aplicación cuando se guarda el enlace a su pantalla de inicio. funciona bien cuando se escriba la dirección en safari, pero al guardar el enlace a la pantalla de inicio = el problema
    • parece que no tienen la config.xml. es debido a su desarrollada en asp.net?
    • Lo que yo veo. Si eso no es una opción, supongo que cae de nuevo a la CSS. Actualmente estoy tratando de encontrar una solución en el CSS y te dejaré saber si puedo encontrar nada de nada.
    • Me parece que han solucionado este problema en mi aplicación. Comprobar mi solución editar y ver si funciona para usted.
    • Funciona! Gracias! Cambiar la etiqueta meta con su reemplazo y ahora el pie de página se queda abajo! Usted puede ver las etiquetas meta en mi actualización
    • Impresionante! Me alegro de que podría ayudar. Era realmente molesto conmigo también.
    • ¿El problema de que el pie de página se asoma sobre el teclado virtual cuando (sin desplazamiento) se presiona en un cuadro de entrada, ocultar el teclado, pulse otra caja de entrada justo debajo de la primera, ocultar el teclado de nuevo y pulse otra caja de entrada por debajo de la segunda caja de entrada?
    • Esto sucede cuando lo ejecuto desde la pantalla de inicio y en safari. Puede esto estar relacionado a la ampliación? Safari en iOS 7 se reduce la barra de direcciones y oculta la barra de navegación.
    • Hmm, me parece que no puede replicar este. Es el pie de página, en realidad en la parte superior del teclado, o es que sólo asoma por encima de él?
    • Cuando se ve desde la entrada de la parte superior del cuadro y se aproxima hacia abajo, eventualmente vas a ver el teclado asomándose por encima de ella y al continuar, usted va a terminar encima de tener el pie de página sobre el teclado. Lo siento por la tardanza en publicar, pero no me llega un notif. al respecto
    • Tener cuidado al añadir altura=device-altura a la etiqueta meta – se mete con todo tipo de css y javascript, altura / posicionamiento reglas. Habiendo dicho eso, parece ser la única solución para arreglar el teclado en pantalla cuestiones. Estoy tratando de encontrar una manera donde puedo agregar la «height=dispositivo de altura» configuración mediante programación, es decir, sólo cuando el iOS aparecerá el teclado.
    • Así que @Zarigüeya la altura=dispositivo de altura hace mantener el pie de página de «saltar» hasta la parte superior del teclado virtual, PERO se introduce un nuevo problema (al menos para mí) – si cierras el teclado pulsando el botón «hecho» todo funciona, PERO si cierras el teclado, al borrar el elemento de entrada (es decir, haciendo clic en cualquier lugar de la pantalla fuera de la entrada), el pie de página, a CONTINUACIÓN, salta y se queda atascado, donde la parte superior del teclado virtual que solía ser – y la única manera de conseguir que se vaya de nuevo a la parte inferior es para desplazarse por la página.. ¿Puede otra persona reproducir este y/o tiene una solución?
    • Así que creo que he solucionado mi problema, se requiere de: $(‘body’).css(‘altura’, ‘+=9999’).css(‘altura’, ‘-=9999’); en el desenfoque de la entrada – que parece desencadenar una barra de desplazamiento y, a continuación, los elementos fijos volver a donde deben estar. Nota: he visto una solución similar con simplemente ‘1’ en lugar de ‘9999’, pero eso no funciona para mí – en este caso creo que debe ser suficiente para forzar una barra de desplazamiento a ser visible.
    • Yo tenía el mismo problema con la barra pegado al pulsar en algún lugar fuera de las cajas de entrada, al pulsar el botón hecho en todo funcionó como se esperaba. He utilizado la ventana.scrollBy(0, 0); para actualizar la vista. También he tenido que utilizar un 350ms tiempo de espera para el teclado a desaparecer.
    • Esto es impresionante!!! Muchas gracias!
    • Ya esta resuelto mi fijo de pie de página del tema. Un millón de gracias. 🙂

  2. 5

    No es el culpable de su #footer clase
    bottom:0px;
    Si usted le da bottom a cualquier elemento, en la apariencia del teclado virtual, los elementos se mueven hacia arriba en iOS 7.
    La solución es utilizar top propiedad.

    • sólo un complemento, lo que sucede en mi android jelly bean así. pero no puedo ver cómo la parte superior de la propiedad resolver mi diseño, ya que el elemento destinado a ser pegado en el fondo? por favor, consejos
  3. 3

    Aprobado respuesta obras, pero se puede jugar con un poco de CSS, así que tengo que usar algo más. No es mi solución, pero lo encontré en el internet y trabajó para mí:

    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();
            }
        }
    }
    • Para un determinado iOS revisión que realmente no debería estar usando javascript inline especialmente cuando es un evento de cambio de tamaño. La comprobación de iOS antes de ejecutar el evento de cambio de tamaño que mejorará considerablemente el rendimiento de $(document).ready(function () { var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7); if (ios7){ $(window).on("resize",function(){ //your iOS fix here }); } });
  4. 3

    Estoy un poco tarde pero esto funciona así:

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

    Esto supone un fijo o posición absoluta elemento que tiene de fondo: algún número originalmente. Agregue esto a donde sea apropiado en su scripts de javascript (probablemente en una función que se llama cuando se carga la página). Este utiliza jQuery pero fácilmente se traduce en javascript. Básicamente, esto obliga a que el pie permanezca en la parte inferior relacionadas por la parte de arriba del valor en lugar de la inferior valor.

    • Esa es una buena solución a mis necesidades. Pero hay un problema. Si la página es desplazable, pie de página no aparece en la posición correcta. Especialmente en el caso de que la página es auto desplaza cuando tapper en un campo
  5. 1

    Aquí es cómo hemos resuelto que:
    córdoba 2.9.0.
    Solución 1. la adición de la ventanilla de la etiqueta meta hizo resolver en cierta medida, pero no totalmente.Por lo tanto caer.
    Solución 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();
                       }
                  }
    });

    donde #pie de página es el id del div whihc mantiene de pie de página.
    Esto mostrará la barra de herramientas para un flash de un segundo y la piel, para evitar este parpadeo hemos añadido algo de código en el nativo,
    1.Registrarse para el keyboardshow evento en su MainViewcontroller.m
    agregar lo siguiente en el init functioon:

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

    2.agregue la siguiente función

    -(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.En el archivo js que agregar la función

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

    Háganos saber si esta solución funciona para u.

  6. 0

    En mi caso he utilizado
    para capturar el evento al entrar en los campos de entrada de texto de los eventos y ocultar la barra inferior
    el uso de

    if($(event.target).hasClass("inputtextfield")){
    
            $('.bottom_bar').hide();}

    y capturar el evento cuando el teclado se cierra y se mostrará de nuevo el teclado usando

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

    Principal problema en el CSS de la clase de propiedad

    pie de página{}

    Ha establecido la posición «fija» y z-index.

    Por favor controlador de posición de la propiedad de acuerdo con el Iphone.

    • Decir más y post código de ejemplo para tu sugerencia.

Dejar respuesta

Please enter your comment!
Please enter your name here