iPad Web App: Virtuelle Tastatur mithilfe von JavaScript in Safari erkennen?

Ich schreibe eine Web-App für das iPad ( keine reguläre App Store-App - sie wurde mit HTML, CSS und JavaScript geschrieben). Da die Tastatur einen großen Teil des Bildschirms ausfüllt, ist es sinnvoll, das Layout der App so zu ändern, dass es dem verbleibenden Platz entspricht, wenn die Tastatur angezeigt wird. Ich habe jedoch keine Möglichkeit gefunden, festzustellen, wann oder ob die Tastatur angezeigt wird.

Meine erste Idee war anzunehmen, dass die Tastatur sichtbar ist, wenn ein Textfeld den Fokus hat. Wenn jedoch eine externe Tastatur an ein iPad angeschlossen ist, wird die virtuelle Tastatur nicht angezeigt, wenn ein Textfeld den Fokus erhält.

In meinen Experimenten hatte die Tastatur auch keinen Einfluss auf die Höhe oder Bildlaufhöhe eines der DOM-Elemente, und ich habe keine proprietären Ereignisse oder Eigenschaften gefunden, die angeben, ob die Tastatur sichtbar ist.

Ich habe eine Lösung gefunden, die funktioniert, obwohl sie etwas hässlich ist. Es wird auch nicht in jeder Situation funktionieren, aber es funktioniert für mich. Da ich die Größe der Benutzeroberfläche an die Fenstergröße des iPad anpasse, kann der Benutzer normalerweise nicht scrollen. Mit anderen Worten, wenn ich das scrollTop des Fensters einstelle, bleibt es bei 0.

Wenn andererseits die Tastatur angezeigt wird, funktioniert das Scrollen plötzlich. So kann ich scrollTop einstellen, seinen Wert sofort testen und dann zurücksetzen. So könnte das mit jQuery im Code aussehen:

$(document).ready(function(){
    $('input').bind('focus',function() {
        $(window).scrollTop(10);
        var keyboard_shown = $(window).scrollTop() > 0;
        $(window).scrollTop(0);

        $('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
    });
});

Normalerweise würden Sie erwarten, dass dies für den Benutzer nicht sichtbar ist. Leider rollt das iPad zumindest beim Ausführen im Simulator sichtbar (wenn auch schnell) wieder auf und ab. Trotzdem funktioniert es zumindest in bestimmten Situationen.

Ich habe dies auf einem iPad getestet und es scheint gut zu funktionieren.

Sie können das Focusout- Ereignis verwenden, um eine Tastaturentlassung zu erkennen. Es ist wie Unschärfe, aber Blasen. Es wird ausgelöst, wenn die Tastatur geschlossen wird (aber natürlich auch in anderen Fällen). In Safari und Chrome kann das Ereignis nur mit addEventListener registriert werden, nicht mit älteren Methoden. Hier ist ein Beispiel, mit dem ich eine Phonegap-App nach dem Entlassen der Tastatur wiederhergestellt habe.

 document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});

Ohne dieses Snippet blieb der App-Container bis zur Seitenaktualisierung in der nach oben gescrollten Position.

Vielleicht ist eine etwas bessere Lösung, das "Unschärfe" -Ereignis (in meinem Fall mit jQuery) an die verschiedenen Eingabefelder zu binden.

Dies liegt daran, dass beim Verschwinden der Tastatur alle Formularfelder unscharf werden. Für meine Situation löste dies das Problem.

$('input, textarea').bind('blur', function(e) {

       // Keyboard disappeared
       window.scrollTo(0, 1);

});

ich hoffe es hilft. Michele

Wenn eine Bildschirmtastatur vorhanden ist, führt das Fokussieren eines Textfelds am unteren Rand des Ansichtsfensters dazu, dass Safari das Textfeld in die Ansicht scrollt. Es gibt möglicherweise eine Möglichkeit, dieses Phänomen auszunutzen, um das Vorhandensein der Tastatur zu erkennen (mit einem winzigen Textfeld am unteren Rand der Seite, das momentan den Fokus erhält, oder so ähnlich).

Während des Fokusereignisses können Sie über die Dokumenthöhe und auf magische Weise über das Fenster scrollen. Die Höhe wird durch die Höhe der virtuellen Tastatur verringert. Beachten Sie, dass die Größe der virtuellen Tastatur für Quer- und Hochformat unterschiedlich ist. Sie müssen sie daher erneut erkennen, wenn sie sich ändert. Ich würde davon abraten, sich diese Werte zu merken, da der Benutzer jederzeit eine Bluetooth-Tastatur verbinden / trennen kann.

var element = document.getElementById("element"); // the input field
var focused = false;

var virtualKeyboardHeight = function () {
    var sx = document.body.scrollLeft, sy = document.body.scrollTop;
    var naturalHeight = window.innerHeight;
    window.scrollTo(sx, document.body.scrollHeight);
    var keyboardHeight = naturalHeight - window.innerHeight;
    window.scrollTo(sx, sy);
    return keyboardHeight;
};

element.onfocus = function () {
    focused = true;
    setTimeout(function() { 
        element.value = "keyboardHeight = " + virtualKeyboardHeight() 
    }, 1); // to allow for orientation scrolling
};

window.onresize = function () {
    if (focused) {
        element.value = "keyboardHeight = " + virtualKeyboardHeight();
    }
};

element.onblur = function () {
    focused = false;
};

Beachten Sie, dass bei Verwendung einer Bluetooth-Tastatur die Höhe der Tastatur 44 beträgt. Dies entspricht der Höhe der Symbolleiste [Zurück] [Weiter].

Es gibt ein kleines Flackern, wenn Sie diese Erkennung durchführen, aber es scheint nicht möglich zu sein, dies zu vermeiden.

Bearbeiten: Von Apple dokumentiert, obwohl ich es nicht zum Laufen bringen konnte: WKWebView- Verhalten mit Tastaturanzeigen : "In iOS 10 entsprechen WKWebView-Objekte dem nativen Verhalten von Safari, indem sie ihre window.innerHeight-Eigenschaft aktualisieren, wenn die Tastatur angezeigt wird, und rufen nicht auf Ereignisse in der Größe ändern "(kann möglicherweise Fokus oder Fokus plus Verzögerung verwenden, um die Tastatur zu erkennen, anstatt die Größe zu ändern).

Bearbeiten: Code setzt Bildschirmtastatur voraus, keine externe Tastatur. Lassen Sie es, weil Informationen für andere nützlich sein können, die sich nur für Bildschirmtastaturen interessieren. Verwenden Sie http://jsbin.com/AbimiQup/4 , um Seitenparameter anzuzeigen.

Wir testen, ob document.activeElementes sich um ein Element handelt, das die Tastatur anzeigt (Eingabetyp = Text, Textbereich usw.).

Der folgende Code fummelt Dinge für unsere Zwecke (obwohl nicht allgemein korrekt).

function getViewport() {
    if (window.visualViewport && /Android/.test(navigator.userAgent)) {
        // https://developers.google.com/web/updates/2017/09/visual-viewport-api    Note on desktop Chrome the viewport subtracts scrollbar widths so is not same as window.innerWidth/innerHeight
        return {
            left: visualViewport.pageLeft,
            top: visualViewport.pageTop,
            width: visualViewport.width,
            height: visualViewport.height
        };
    }
    var viewport = {
            left: window.pageXOffset,   // http://www.quirksmode.org/mobile/tableViewport.html
            top: window.pageYOffset,
            width: window.innerWidth || documentElement.clientWidth,
            height: window.innerHeight || documentElement.clientHeight
    };
    if (/iPod|iPhone|iPad/.test(navigator.platform) && isInput(document.activeElement)) {       // iOS *lies* about viewport size when keyboard is visible. See http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari Input focus/blur can indicate, also scrollTop: 
        return {
            left: viewport.left,
            top: viewport.top,
            width: viewport.width,
            height: viewport.height * (viewport.height > viewport.width ? 0.66 : 0.45)  // Fudge factor to allow for keyboard on iPad
        };
    }
    return viewport;
}


function isInput(el) {
    var tagName = el && el.tagName && el.tagName.toLowerCase();
    return (tagName == 'input' && el.type != 'button' && el.type != 'radio' && el.type != 'checkbox') || (tagName == 'textarea');
};

Der obige Code ist nur ungefähr: Er ist falsch für geteilte Tastatur, nicht angedockte Tastatur und physische Tastatur. Laut Kommentar oben können Sie möglicherweise einen besseren Job als den angegebenen Code auf Safari (seit iOS8?) Oder WKWebView (seit iOS10) mit machenwindow.innerHeight Eigenschaft .

Ich habe unter anderen Umständen Fehler festgestellt: z. B. den Fokus auf die Eingabe legen, dann zum Startbildschirm gehen und dann zur Seite zurückkehren; Das iPad sollte das Ansichtsfenster nicht verkleinern. alte IE-Browser funktionieren nicht, Opera hat nicht funktioniert, da Opera nach dem Schließen der Tastatur den Fokus auf das Element gelegt hat.

Die markierte Antwort (Ändern des Bildlauffelds zum Messen der Höhe) hat jedoch unangenehme Nebenwirkungen auf der Benutzeroberfläche, wenn das Ansichtsfenster zoombar ist (oder das Zoomen in den Einstellungen aktiviert ist). Ich verwende nicht die andere vorgeschlagene Lösung (Ändern des Bildlaufs), da unter iOS, wenn das Ansichtsfenster zoombar ist und zur fokussierten Eingabe gescrollt wird, fehlerhafte Interaktionen zwischen Scrollen & Zoomen & Fokussieren auftreten (die eine nur fokussierte Eingabe außerhalb des Ansichtsfensters belassen können - nicht sichtbar).

Nur auf Android 4.1.1 getestet:

Das Unschärfeereignis ist kein zuverlässiges Ereignis zum Testen der Tastatur nach oben und unten, da der Benutzer als Option zum expliziten Ausblenden der Tastatur ein Unschärfeereignis auf dem Feld auslöst, durch das die Tastatur angezeigt wurde.

Das Größenänderungsereignis funktioniert jedoch wie ein Zauber, wenn die Tastatur aus irgendeinem Grund nach oben oder unten geht.

Kaffee:

$(window).bind "resize", (event) ->  alert "resize"

Wird immer dann ausgelöst, wenn die Tastatur aus irgendeinem Grund angezeigt oder ausgeblendet wird.

Beachten Sie jedoch, dass es im Fall eines Android-Browsers (anstelle einer App) eine einziehbare URL-Leiste gibt, die beim Zurückziehen keine Größenänderung auslöst, jedoch die verfügbare Fenstergröße ändert.

Versuchen Sie, die Größe des Fensters zu ermitteln, anstatt die Tastatur zu erkennen

Wenn die Höhe des Fensters verringert wurde und die Breite immer noch gleich ist, bedeutet dies, dass die Tastatur eingeschaltet ist. Wenn die Tastatur nicht ausgeschaltet ist, können Sie auch hinzufügen, ob ein Eingabefeld scharfgestellt ist oder nicht.

Versuchen Sie diesen Code zum Beispiel.

var last_h = $(window).height(); //  store the intial height.
var last_w = $(window).width(); //  store the intial width.
var keyboard_is_on = false;
$(window).resize(function () {
    if ($("input").is(":focus")) {
        keyboard_is_on =
               ((last_w == $(window).width()) && (last_h > $(window).height()));
    }   
});     

Diese Lösung merkt sich die Bildlaufposition

    var currentscroll = 0;

    $('input').bind('focus',function() {
        currentscroll = $(window).scrollTop();
    });

    $('input').bind('blur',function() {
        if(currentscroll != $(window).scrollTop()){

        $(window).scrollTop(currentscroll);

        }
    });

Probier diese:

var lastfoucsin;

$('.txtclassname').click(function(e)
{
  lastfoucsin=$(this);

//the virtual keyboard appears automatically

//Do your stuff;

});


//to check ipad virtual keyboard appearance. 
//First check last focus class and close the virtual keyboard.In second click it closes the wrapper & lable

$(".wrapperclass").click(function(e)
{

if(lastfoucsin.hasClass('txtclassname'))
{

lastfoucsin=$(this);//to avoid error

return;

}

//Do your stuff 
$(this).css('display','none');
});`enter code here`

Wie in den vorherigen Antworten erwähnt, wird die Variable window.innerHeight jetzt unter iOS10 ordnungsgemäß aktualisiert, wenn die Tastatur angezeigt wird. Da ich die Unterstützung für frühere Versionen nicht benötige, habe ich den folgenden Hack entwickelt, der möglicherweise etwas einfacher ist als der diskutierte "Lösungen".

//keep track of the "expected" height
var windowExpectedSize = window.innerHeight;

//update expected height on orientation change
window.addEventListener('orientationchange', function(){
    //in case the virtual keyboard is open we close it first by removing focus from the input elements to get the proper "expected" size
    if (window.innerHeight != windowExpectedSize){
        $("input").blur();
        $("div[contentEditable]").blur();     //you might need to add more editables here or you can focus something else and blur it to be sure
        setTimeout(function(){
            windowExpectedSize = window.innerHeight;
        },100);
    }else{
        windowExpectedSize = window.innerHeight;
    }
});

//and update the "expected" height on screen resize - funny thing is that this is still not triggered on iOS when the keyboard appears
window.addEventListener('resize', function(){
    $("input").blur();  //as before you can add more blurs here or focus-blur something
    windowExpectedSize = window.innerHeight;
});

dann können Sie verwenden:

if (window.innerHeight != windowExpectedSize){ ... }

um zu überprüfen, ob die Tastatur sichtbar ist. Ich benutze es jetzt schon eine Weile in meiner Web-App und es funktioniert gut, aber (wie bei allen anderen Lösungen) kann es vorkommen, dass es fehlschlägt, weil die "erwartete" Größe nicht richtig aktualisiert wird oder so.

Ich habe etwas gesucht und konnte nichts Konkretes für ein "auf der Tastatur gezeigt" oder "auf der Tastatur entlassen" finden. Siehe die offizielle Liste der unterstützten Veranstaltungen . Siehe auch Technischer Hinweis TN2262 für iPad. Wie Sie wahrscheinlich bereits wissen, gibt es ein Körperereignis, das onorientationchangeSie verkabeln können, um Quer- / Hochformat zu erkennen.

Ähnlich, aber eine wilde Vermutung ... haben Sie versucht, die Größenänderung zu erkennen? Änderungen am Ansichtsfenster können dieses Ereignis indirekt über die angezeigte / ausgeblendete Tastatur auslösen.

window.addEventListener('resize', function() { alert(window.innerHeight); });

Was einfach die neue Höhe bei jedem Größenänderungsereignis alarmieren würde ...

Ich habe es selbst nicht versucht, also ist es nur eine Idee ... aber haben Sie versucht, Medienabfragen mit CSS zu verwenden, um zu sehen, wann sich die Höhe des Fensters ändert, und dann das Design dafür zu ändern? Ich würde mir vorstellen, dass Safari Mobile die Tastatur nicht als Teil des Fensters erkennt, sodass dies hoffentlich funktionieren würde.

Beispiel:

@media all and (height: 200px){
    #content {height: 100px; overflow: hidden;}
}

Das Problem ist, dass Geräte auch im Jahr 2014 Ereignisse zur Größenänderung des Bildschirms sowie Bildlaufereignisse uneinheitlich verarbeiten, während die Softtastatur geöffnet ist.

Ich habe festgestellt, dass insbesondere iOS einige seltsame Layoutfehler auslöst, selbst wenn Sie eine Bluetooth-Tastatur verwenden. Anstatt eine weiche Tastatur zu erkennen, musste ich nur auf Geräte zielen, die sehr schmal sind und über Touchscreens verfügen.

Ich verwende Medienabfragen (oder window.matchMedia ) zur Breitenerkennung und Modernizr zur Erkennung von Berührungsereignissen.

Vielleicht ist es einfacher, in den Einstellungen Ihrer App ein Kontrollkästchen zu aktivieren, mit dem der Benutzer die Option "Externe Tastatur angeschlossen" aktivieren kann.

Erklären Sie dem Benutzer im Kleingedruckten, dass externe Tastaturen in heutigen Browsern derzeit nicht erkennbar sind.

Nun, Sie können erkennen, wann Ihre Eingabefelder den Fokus haben, und Sie kennen die Höhe der Tastatur. Es gibt auch CSS, um die Ausrichtung des Bildschirms zu erhalten, also denke ich, dass Sie es hacken können.

Sie möchten jedoch irgendwie mit dem Fall einer physischen Tastatur umgehen.