68 votos

pantalla de estilo cuando el teclado virtual es activo

Idealmente, me gustaría que toda la interfaz para tener un estilo personalizado 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.

Los objetivos, tanto de los androides y ios, en un sitio web (HTML/JavaScript/CSS) También tenga en cuenta que el diseño interior es: "líquido".

Edit: 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  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

21voto

Praveen Vijayan Puntos 2323

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

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

Actualización

(1). Asunción de un sitio web y se ejecutan 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 y 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 nuestro propio plugin de 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 ]

la actualización de iOS

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/

15voto

benone Puntos 163

Me encontré 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> 

1voto

Andreas Puntos 714

Usted probablemente tendrá que usar fragmentos de la presentación.
http://developer.android.com/guide/topics/fundamentals/fragments.html

Como para la comprobación de si o no el teclado que se muestra:
Android: Es un software de teclado que se muestra?

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X