stylizacja ekranu przy aktywnej klawiaturze wirtualnej

Natknąłem się na ten sam problem, to działa dla mnie:

<!-- 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> 

Niech JavaScript zastosuje klasę do ciała , gdy element wejściowy ma focus.

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

A następnie użyj @media zapytań, aby określić, czy mobilny Widok:

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

Kombinacja pozwoli Ci stylizować stronę, gdy klawiatura jest włączona, na telefonie komórkowym. Dziękuję.

Mam dokładnie ten problem. Oto moje rozwiązanie na razie, byłbym wdzięczny, gdyby ktoś mógł przetestować na Apple: http://jsfiddle.net/marcchehab/f2ytsu8z/show (aby zobaczyć kod źródłowy i wszystkie: http://jsfiddle.net/marcchehab/f2ytsu8z )

I wykrywam czy nie ma w następujący sposób: po wczytaniu obliczam zmienną "sumedges", czyli $(window).width () + $(window).wysokość (). Następnie w przypadku $(window).resize () porównuję: jeśli suma $(window).width () + $(window).height() stała się mniejsza od "sumedges", oznacza to, że klawiatura jest wyłączona. To działa tutaj na Chrome na Androida. Możesz łatwo dostosować ten kod, aby robić, co chcesz.

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

Używając jQuery, nie znalazłem sposobu, aby wymusić płynne przejście, gdy klikniesz na wejście i wyskoczy klawiatura. Ale {[10] } może uda się oszukać system: w fiddle ustawiłem fałszywe wejście (niebieskie). Po kliknięciu na niego, prawdziwe dane wejściowe pojawią się tuż pod moim wyświetlaczem (żółty) i jest zaznaczony. W ten sposób wszystko wygląda gładko tutaj na Chrome na Androida. Jeszcze raz, byłbym wdzięczny, jeśli moglibyście przetestować.

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

$("#realinput input").blur(function(){
    $("#realinput").hide();
});