javascript - only - El campo de entrada iOS 7.1 ubicado debajo del teclado virtual fuerza el enfoque

ionic platform

Question

Estoy escribiendo una aplicación de chat usando Cordova, y la vista de chat tiene un campo de entrada similar a iMessage en la parte inferior de la página. En iOS 7.0, al hacer clic en el campo se redimensionó la ventana y se colocó el campo de entrada sobre el teclado. En iOS 7.1, al hacer clic en el campo de entrada simplemente empujé todo hacia arriba desde la parte inferior y no cambia el tamaño de la ventana.

Mi ventana gráfica está configurada para:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" />

• Al posicionar la entrada relativa a la parte superior, el cambio de tamaño no ocurre. Sin embargo, posicionar la entrada lo suficientemente bajo como para alinearse con la parte superior del teclado da como resultado el error de cambio de tamaño. Esto puede ser replicado construyendo la demostración de vidrio esmerilado Ionic y cambiando el pie de página de

  <footer class="bar bar-footer bar-frosted"><button class="button button-clear button-positive" ng-click="add()">Add Message</button></footer>

  a

  <footer class="bar bar-footer bar-frosted"><input name="testInput"></footer>

  En www / index.html

Esto replica el error en iOS7.1 y funciona como se esperaba en iOS 7.0.x. He seguido las sugerencias aquí , pero tienen fecha y no terminaron funcionando. ¡Gracias de antemano por cualquier idea!

Answer 1

¿Has intentado configurar el ancho explícitamente? Como se menciona aquí ?

<meta name="viewport" content="width=device-width">

Answer 2

Editar: Ionic ha solucionado esto en beta 4, por lo que estas soluciones hacky no deberían ser necesarias :) ¡Grande para el equipo de Ionic por reconocer el problema y solucionarlo!

Con lo que voy ahora es similar a la respuesta de @ajsnaps anterior . No lo considero una buena solución porque tiene errores (similares a los señalados en el otro hilo).

Trataré de actualizar esto con algo mejor cuando lo resuelva, y lo dejaré abierto en caso de que alguien presente una solución mejor.

$("input").on(''focus'',function(){ 

 //set brief timeout to let window catch up
 setTimeout(function(){

 //pull down the message area (scrollPane) and header (titleBar)
 //works on both 3.5" and 4" screens
 $("titleBar").css(''top'', ''215px'');
 $("scrollPane").css(''top'', ''273px'');

 },20); 

});

$("input").on(''blur'',function(){

 //set brief timeout to let window catch up
 setTimeout(function(){

 //push the top back up
 $("titleBar").css(''top'', ''0px'');
 $("scrollPane").css(''top'', ''56px'');

 },20); 

});

Además, me aseguré de que el encabezado se restablezca después de navegar desde la vista de chat.

¡Espero que esto ayude!