Idealmente, me gustaría que toda la interfaz para tener un personalizado estilo que se ve en el ios (ipod touch /ipad) o android equivalente con el teclado virtual de la presente. Ver abajo para más detalles.

Un conjunto personalizado de CSS hacking reglas para ser activo, cuando el teclado está «presente», es también una solución aceptable.

Objetivos tanto en android y ios, en un sitio web (HTML/JavaScript/CSS)
También tenga en cuenta que el diseño interior es: «líquido».

Edición: Esto era más de diseño, luego de texto; por Lo que los cambios no son disorientating. En el nivel más bajo, yo sólo deseo un cambio de diseño con y sin las teclas virtuales (tal vez sólo un cambio de fondo).

La cuestión sobre la que, este es un buen o mal diseño de la idea, es discutible. Sin embargo, creo que es irrelevante para la pregunta. Por ejemplo un exploit puede tener usos más luego de texto (tales como juegos, o de medios interactivos).

Por lo tanto la recompensa: a Pesar de no necesitar más que la respuesta para el proyecto en el que estaba trabajando (una alternativa de diseño se utilizó). Todavía creo que esta pregunta se pueden beneficiar de ser contestadas.

Comportamiento Predeterminado

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Comportamiento Deseado

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+
  • Por qué? Es molesto tener cosas desaparecen cuando usted está tratando de escribir, pero el cambio de tamaño que drásticamente se podría hacer visible, sin embargo, difíciles o imposibles de leer. (No sé lo que iOS, pero en mi teléfono Android si usted cambia el tamaño del contenido, como los que sería muy difícil de leer.) ¿Usted planea hacer esto tanto en orientación horizontal y vertical? Por cierto, bonito arte ASCII.
  • Es un diseño fluido, por lo que no va a cambiar el tamaño de la fuente del texto (se mantiene igual)… es simplemente quiero que los dos por separado en la caja de entrada (parte superior y parte inferior) para volver a la posición sí, para ser ambos a la vista. El irrelevante el contenido del centro, sin embargo, lo más probable, de hecho «oculto». Y es por tanto el retrato y el paisaje (aunque prácticamente sólo retrato tendría sentido)
  • +1 a lo que nnnnn dijo. Los usuarios no esperar este comportamiento y no lo entiendo. Dejar de la manera que es.
  • Diseño fluido, la suposición es que el conjunto de la región es de texto, sin embargo todo lo que podría ser es una sola línea de entrada de texto, con el resto siendo un fondo dinámico de reaccionar a la actualización de tamaño (en lugar de repercutir en «ningún lugar»)
  • Usted podría tratar de usar una segunda disposición que sólo se muestra cuando el teclado está visible
  • al final del día, ya que su objetivo final sería el de un usuario interfaz de usuario amigable, le sugiero que deje la manera en la que están familiarizados con el lugar de hacer las cosas complicadas para ellos.
  • exactamente lo que estoy tratando de conseguir =)

InformationsquelleAutor PicoCreator | 2011-12-19

4 Comentarios

  1. 21

    No estoy seguro, es este el efecto deseado?. revise este enlace

    http://jsfiddle.net/UHdCw/3/

    Actualización

    (1). Suponiendo que su sitio web & ejecuta en el navegador del dispositivo. A continuación, podemos comprobar la presencia de un teclado virtual comprobando el tamaño de la pantalla.

    Comprobar en el navegador del dispositivo – http://jsfiddle.net/UHdCw/8/show/

    código : – http://jsfiddle.net/UHdCw/8/

    (2). Si usted está construyendo aplicaciones nativas con HTML5 & Phonegap, las cosas serán diferentes. Ya que no hay directo de la API de gancho para comprobar el teclado de estado, tenemos que escribir nuestra propio plugin en Phonegap.

    En Android se puede comprobar mostrar/ocultar el estado de teclado mediante el uso de código nativo [marque aquí]. y tener que escribir un plugin de Phonegap para conseguir esos eventos en nuestro HTML.

    [Phonegap es un ejemplo. Creo que la mayoría del html a los nativos de los marcos de tener este tipo de felicidad a gancho con código nativo ]

    iOS actualización

    Como usted dijo que no hay ningún cambio en la altura/posición cuando el teclado está presente. Podemos hacer una cosa, cuando la entrada se obtiene el foco, podemos añadir reducir clase y reducir los tamaños de elemento. Compruebe lo siguiente enlace.

    http://jsfiddle.net/UHdCw/28/show/

    • +1 para probar : Sí, un estilo personalizado cuando el teclado está activo… y también es un ejemplo de cómo el contenido puede cambiar sin hacer las cosas demasiado complicadas, sólo la imagen cambia de tamaño : no el texto… sin Embargo se echa de menos el punto más importante, cómo detectar el activo nativo de teclado. >.< (no uno personalizado)
    • comprobar mi actualización.
    • Dun te preocupes, es solo sitio web y los navegadores de dispositivos… Y no, no trabajo en iOS, que hacen que el navegador no cambia de tamaño, todo el fragmento se desplaza hacia arriba. Mientras esto evita que los cambios en el diseño, evita que el tamaño de la detección de cambio de… Que era buena idea =D yo sinceramente esperaba que iba a funcionar, y sentía que tenía sentido.
    • hmm.. no he comprobado en iOS. Funcionó muy bien en mi galaxy S. permite comprobar cualquier tweak que hay para iOS.:)
    • Sí, funciona bien en mi Nota, >_> jaja al menos es progreso
    • Parece un buen hack cuando se mezclan ios de detección. =) Obtendrá la recompensa por sus esfuerzos en la exploración.
    • Gracias por la recompensa 🙂

  2. 14

    He encontrado con el mismo problema, esto funciona para mí:

    <!-- Android Viewport height fix-->
    <script type="text/javascript">
    var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
    if(isAndroid) {
        document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
    }
    </script> 
    • ¿funciona en todos los navegadores?
    • Cómo esto puede funcionar? Si la he entendido, la etiqueta meta es escrito cuando el documento se carga, esto significa que si el usuario se centró en un elemento y abrió un teclado después de la carga de la página – el problema debe tener lugar….
  3. 11

    Tener JavaScript aplicar una clase a la cuerpo cuando un elemento de entrada ha focus.

    $("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
    $("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

    Y, a continuación, utilizar @media consultas para determinar si la vista móvil:

    @media (max-width:550px) { 
        body.when-keyboard-showing .header { height:0; padding:0; }
    }

    La combinación te permitirá estilizar la página cuando el teclado está arriba, en el móvil. Gracias.

    • +1 Aunque esta solución puede producir falsos positivos cuando el usuario tiene teclado externo conectado, es todavía mejor que el cálculo de algún elemento de la altura (el Usuario puede girar su teléfono, dividir su pantalla. FFS, incluso de usuario de escritorio puede cambiar el tamaño de su ventana).
  4. 0

    Tengo el problema exacto. Aquí está mi solución hasta el momento, te agradecería si alguien pudiera probar en la Manzana: http://jsfiddle.net/marcchehab/f2ytsu8z/show (para ver el código fuente y todos los: http://jsfiddle.net/marcchehab/f2ytsu8z)

    Me detectar si el teclado está fuera de la siguiente manera: Al cargar me calcular una variable «sumedges», que es de $(window).width() + $(window).altura(). Luego, en el evento de $(window).resize() puedo comparar: Si la suma de $(window).width() + $(window).la altura (a) se ha vuelto más pequeño que el de «sumedges», significa que el teclado está fuera. Esto funciona aquí en Chrome en Android. Puede modificar este código para hacer lo que te gusta.

    var sumedges = $(window).width() + $(window).height();
    $(window).resize(function(){
        if($(window).width() + $(window).height() < sumedges) {
        $("#display").html("keyboard out");
      } else {
        $("#display").html("keyboard in");
      }
    });

    Usando jQuery, he encontrado ninguna manera de forzar una transición suave cuando usted hace clic en una entrada y el teclado saldrá. Pero es posible engañar al sistema: En el violín, he creado un falso de entrada (azul). Cuando haga clic en él, la entrada real aparece justo debajo de mi pantalla (amarillo) y es seleccionada. De esta manera todo se ve sin problemas aquí en Chrome en Android. De nuevo, me gustaría saber si ustedes podrían prueba.

    $("#fakeinput").click(function(){
        $("#realinput").show().children("input").focus();
      $("html,body").scrollTop($("#display").offset().top);
    });
    
    $("#realinput input").blur(function(){
        $("#realinput").hide();
    });

Dejar respuesta

Please enter your comment!
Please enter your name here