El teclado mostró la posición de los elementos desordenados

Tengo el juego que requieren la entrada del teclado táctil del móvil. Su pantalla tiene problema, siempre que el teclado aparece en el foco de entrada de texto, todo mi elemento que posición: absoluto se ensucia todo.

¿Hay un plugin que permite que el teclado móvil aparezca siempre de modo que vuelva a colocar todos los elementos O necesito alterar el css para hacer los elementos de modo que el no ensucie cuando el teclado aparece?

¿Cómo debo implementar esto?

Este es uno de los elementos css:

#mixer{ position: absolute; bottom:29%; left:25%; width: 234px; height: 210px; background: transparent url(img/mixer.png) 0 50px no-repeat; } 

Introduzca aquí la descripción de la imagen

Nota: Estoy usando JQuery móvil, phonegap en el entorno de Android.

5 Solutions collect form web for “El teclado mostró la posición de los elementos desordenados”

En su AndroidManifest.xml, añada la siguiente línea bajo la actividad con el teclado:

android:windowSoftInputMode="adjustNothing"

Creo que su problema es con su atributo Bottom establecido en "en este caso" 29%. Es posible que desee establecerlo como absoluto con TOP en lugar de inferior.

De esta manera se empujará desde arriba en lugar de mirar hacia abajo, en este caso el teclado.

Por lo que desea que en el 29% de la parte inferior, 100 – 29 = 71 Eliminar el 29% inferior y cambiarlo a la parte superior 71%.

Escuche los eventos de Softkeyboard de mostrar / ocultar. Esta respuesta en SO tiene un ejemplo de código:

Listín de eventos de Softkeyboard en Android

Cuando el Softkeyboard esté en estado mostrado, utilice un CSS 'keyboard-is-shown' separado para su juego. Cuando el Softkeyboard está oculto, vuelva a la anterior 'teclado-es-cerrado' CSS.

Este anterior Q & A en SO trata de una situación similar:

Problema de diseño de aplicación de phonegap con teclado suave en Android 2.3.6 y en iPhone 5.0

Me encontré con esto en una aplicación de iPad en lugar de Android, pero parece que el mismo problema.

JQuery móvil establece la altura de la página con javascript cuando cambia el tamaño – cualquier cosa alineada a la parte inferior de la página se mueve hacia arriba en el html, al mismo tiempo que el sistema operativo desplaza toda la vista hasta mantener visibles la posición anterior de la entrada.

He arreglado el problema con algunos css que hace que el navegador ignore la configuración de altura. También hace que los cambios de orientación sean mucho más suaves.

 .ui-mobile, .ui-mobile .ui-page { min-height: 100% !important; } 

Echa un vistazo a estos enlaces:

http://android-developers.blogspot.in/2009/04/updating-applications-for-on-screen.html

http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode

Trate de añadir en el manifiesto android: windowSoftInputMode = "adjustResize" parámetro a su etiqueta de actividad.

Espero eso ayude.

  • Cómo excluir caracteres especiales del teclado de android para EditText
  • Cubierta del teclado de Android EditText cuando hago clic en él segunda vez
  • NumberPicker en AlertDialog siempre activa el teclado. ¿Cómo desactivar esto?
  • Cómo cambiar la altura de un teclado blando en tiempo de ejecución?
  • Cómo ocultar softkeyboad cuando se inicia la actividad en android?
  • ¿Cómo puedo detectar si el teclado del software es visible en el dispositivo Android?
  • Mostrar automáticamente el teclado personalizado para EditText. Androide
  • React Native: Actualiza el diseño de la aplicación después de mostrar el teclado
  • El teclado de Android se oculta, mostrando el espacio en blanco a continuación, después de regresar del protector de pantalla
  • ¿Cómo se muestra el teclado numérico en un EditText en android?
  • En Android, ¿Se puede interceptar eventos clave a nivel mundial antes de que lleguen al niño?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.