webentwicklung-frage-antwort-db.com.de

Wie kann ich mich programmgesteuert auf ein Textfeld beim Laden von Seiten für mobile Safari konzentrieren?

Hinweis: Aufgrund einer arbeitsbedingten Änderung kann ich die hier veröffentlichten Antworten nicht mehr überprüfen. Höchstwahrscheinlich werde ich eine Antwort unten nie akzeptieren können. Die Informationen, die hier gepostet werden, sind IMO nützlich, daher werde ich sie einfach so lassen, wie sie sind. Wenn Sie glauben, eine Antwort zu kennen, können Sie diese gerne beantworten. Die Community kann dann entscheiden, welche Antworten nützlich sind.


Hintergrund

Ich entwickle eine eigenständige Web-App für den iPod Touch. Eine meiner Anforderungen besteht darin, mich auf ein Textfeld zu konzentrieren, wenn eine Seite geladen wird, damit ein Benutzer eine Aufgabe kontinuierlich ausführen kann (z. B. mit einem Barcodeleser).

Problem

Das Problem ist, dass es auf das betreffende Textfeld fokussiert , aber die Tastatur nicht nach oben zeigt . Gibt es eine Problemumgehung dafür? Oder ist das beabsichtigt von Apple?

Beispiel-HTML

Ich bin mir nicht sicher, wie ich das in ein Code-Snippet einfügen soll, aber hier habe ich experimentiert:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0.0">

    <meta name="Apple-mobile-web-app-capable" content="yes">
    <link rel="Apple-touch-icon" href="https://cdn57.androidauthority.net/wp-content/uploads/2016/06/Android-win-2-300x162.png">

    <title>TESTING</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        // javascript goes here
    </script>
</head>
<body>

    <section id="content">

        <div class="container" style="margin-top: 50px;" >

            <p>Testing textfield focus</p>

            <form method="POST">
                <div class="row">
                    <div class="col-xs-12">
                        <input type="text" class="form-control first-responder" />
                    </div>
                    <div class="col-xs-12">
                        <button type="submit" class="btn" style="width: 100%" >OK</button>
                    </div>
                </div>
            </form>

        </div>

    </section>

</body>
</html>

Ich zeige dies auf Safari an und füge es dann dem Homescreen hinzu, sodass es als eigenständige Web-App fungiert.

Versuche

Ich habe versucht, nach Lösungen zu suchen. Die erste (ich habe den Link verloren) schlug vor, Timeouts wie folgt zu versuchen:

$(function () {
    var firstResponder = $(".first-responder");
    setTimeout(function() {
        firstResponder.focus();

    }, 1000);

})

Eine andere der Lösungen Ich habe vorgeschlagen, den Auswahlbereich wie folgt festzulegen:

$(function () {
    var firstResponder = $(".first-responder");
    setTimeout(function() {
        firstResponder[0].setSelectionRange(0, 9999);

    }, 1000);

})

Dort war auch ein Vorschlag, es an einen Klick zu binden:

$(function () {
    var firstResponder = $(".first-responder");
    firstResponder.on('click', function() {
        firstResponder.focus();
    });

    firstResponder.focus().click();
})

Ich habe auch versucht, einen Touchstart wie folgt auszulösen:

$(function () {
    var firstResponder = $(".first-responder");
    firstResponder.on('touchstart', function() {
        firstResponder.focus();
    });

    firstResponder.trigger('touchstart');
})

Ich habe es auch mit einem einfachen Ajax-Aufruf wie diesem versucht (beachte den Erfolg/Fehler nicht. Alles, was ich tun wollte, war mich nach dem Ajax-Aufruf zu konzentrieren):

function doAjax() {
    var firstResponder = $(".first-responder");

    $.ajax({
        url: "#",
        method: "POST",
        dataType: "json",
        success: function(result) {
            firstResponder.focus();
        },
        error: function(request, error) {
            firstResponder.focus();         
        }
    });
}

Ich war ziemlich verzweifelt, also habe ich versucht setze ein paar CSS zu:

user-select: text;
-webkit-user-select: text;

Diese Lösungen funktionierten unter iOS 9.1 (mit Ausnahme der CSS-Lösung), aber alle scheiterten unter iOS 11.1.1 . Ich habe versucht, verschiedene Lösungen zu kombinieren, Timeouts festzulegen usw., aber keine scheint zu funktionieren. Wie bereits erwähnt, wird der Fokus auf gesetzt , da die Ränder des Textfelds blau werden, was darauf hinweist, dass es den Fokus hat. Aber Ich muss auch die Tastatur anzeigen lassen .

Dieses Verhalten scheint entweder ein Bug oder ein sability / SecurityFeature zu sein. Wenn dies beabsichtigt ist (d. H. Ein Sicherheitsmerkmal), gibt es eine offizielle Dokumentation von Apple, die darüber spricht?

Nachtrag

Wenn Sie der Meinung sind, dass der Barcode-Leser das Problem sein könnte, ist dies nicht der Fall. In dem Projekt, an dem ich arbeite, ersetzt der Barcode-Leser die native Tastatur. Selbst ohne den Barcode sollte ich theoretisch in der Lage sein, meine Anforderung zu erfüllen, solange ich in der Lage bin, die Tastatur beim Laden der Seite aufzurufen.

Kontinuierliche Aufgabe ist möglich, da der Strichcodeleser einschließen kann Enter Geben Sie nach dem eingelesenen Barcode den Schlüssel ein und senden Sie damit das Formular, auf dem sich das Textfeld befindet. Wenn das Textfeld nach dem Neuladen der Seite automatisch fokussiert wird, muss der Benutzer lediglich einen weiteren Barcode lesen. Die Seite wird erneut gesendet, neu geladen, der Autofokus wird aktiviert und der Zyklus kann wiederholt werden.

14
Keale

Nach einigen harten Tests habe ich einen Weg gefunden, der auf dem iPhone 7 meiner Freundin mit ios 11 funktioniert hat, jetzt weiß ich nicht, ob es Ihren Anforderungen entspricht, aber es öffnet die virtuelle Tastatur!

Dies ist die Test-HTML:

<input type='text' id='foo' onclick="this.focus();">
<button id="button">Click here</button>

Dies ist das Javascript:

function popKeyboard(input) {
  input.focus();
  input.setSelectionRange(0, 0);
}

$("#button").on("click", function() {
  popKeyboard($("#foo"));
});

Und das ist die Geige .

Oh und CanIUse nur für den Fall!

Wenn Sie nun auf die Schaltfläche klicken, wird dies als Benutzereingabe ausgewertet, da die Tastatur nur geöffnet werden kann, wenn der Benutzer Eingaben vornimmt (in Android und ios). Wir führen die Funktion popKeyboard aus, die die Eingabe fokussiert und die Eingabe setzt selectionRange auf 0,0, was bedeutet, dass die Einfügemarke auf 0 gesetzt wird und die Tastatur sich öffnet.

Dies wurde unter Android und einem Iphone 7 mit IOS 11 getestet.

Seien Sie vorsichtig, dass sie mich gewarnt hat, dass ihr ios 11 nicht vollständig aktualisiert wurde, aber wenn es funktioniert, bitte sagen Sie es mir!

3
Tosindo

Schauen Sie sich diese Frage mit der Lösung an: jQuery Cursorposition im Textbereich setzen

Wenn Sie die in dieser Lösung beschriebenen Funktionen direkt nach dem ajax ready event verwenden, wird die Tastatur auch in Safari unter iOS 11.2.2 angezeigt

2

Hast du das probiert?

 $(function(){
    $('input.form-control.first-responder').first().focus();
  });

Der Selektor wird durch first () eingegrenzt und stellt sicher, dass er nicht von anderen ähnlichen Klassen auf der Seite beeinflusst wird.

2
s1mpl3

Verwenden Sie ajaxComplete anstelle von load oder ready

Ich lade gerade 1 Datei durch ajax und ajaxComplete Methode ich habe Fokus für Eingabefeld gesetzt.

Dies ist ein funktionierendes Beispiel. Ich hoffe, dass dies für Sie funktionieren wird.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0.0">

    <meta name="Apple-mobile-web-app-capable" content="yes">
    <link rel="Apple-touch-icon" href="https://cdn57.androidauthority.net/wp-content/uploads/2016/06/Android-win-2-300x162.png">

    <title>TESTING</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<style>
	span{
		display:none;
	}
	</style>
	
    <script>
	$(document).ready(function(){
	
		$("span").load("https://www.w3schools.com/xml/cd_catalog.xml");
	
		$(document).ajaxComplete(function(){
			$(".first-responder")[0].focus();
		});
	});
    </script>
</head>
<body>

    <section id="content">

        <div class="container" style="margin-top: 50px;" >

            <p>Testing textfield focus</p>

            <form method="POST">
                <div class="row">
                    <div class="col-xs-12">
                        <input type="text" class="form-control first-responder" />
                    </div>
                    <div class="col-xs-12">
                        <button type="submit" class="btn" style="width: 100%" >OK</button>
                    </div>
                </div>
            </form>

        </div>

    </section>
<span></span>
</body>
</html>

1

wenn Sie Ihre Fokussierung vornehmen, müssen Sie sicherstellen, dass der Browser vollständig geladen ist, und verwenden Sie nicht das onDOMContentReady-Ereignis, sondern das Standardereignis load.

Aufgrund einiger Seltsamkeiten bei modernen Web-Kit-Browsern (Chrome, iOS11) wurde aus irgendeinem Grund das Ereignis load ausgelöst, bevor der Browser tatsächlich vollständig geladen ist. Ich stelle jedoch sicher, dass das load-Ereignis immer noch als Ausgangspunkt verwendet wird.

(function($){
  $(function(){
      window.addEventListener("load", function(){
        setTimeout(function(){  $(".first-responder").focus();  }, 150);
      });
  })
})(jQuery);

https://jsfiddle.net/barkermn01/xzua65jd/1/

1
Martin Barker

Ich habe nur etwas mehr experimentiert. In iOS 11 würde .focus () die Tastatur nicht anzeigen, wenn Sie versuchten, sie beim allerersten Steuerelement zu setzen, ohne dass der Benutzer zum ersten Mal ein Steuerelement berührt. .Focus () würde jedoch die Tastatur anzeigen, vorausgesetzt, Sie haben .blur () im aktuellen document.activeElement nicht vor .focus () in einem anderen Element.

Der folgende Code funktionierte für mich von diesem Tastendruck (Barcodeleser, ScanBoard) für den iPod: -

$(window).keypress(function (e) {
    if (e.which === 13) {
        switch (true) {
            case window.location.href.indexOf('FindReplenishmentLocation') > -1:
            case window.location.href.indexOf('ConfirmReplenishmentLocation') > -1:
            case window.location.href.indexOf('ConfirmReplenishmentPickFace') > -1:
                if (document.activeElement.id === 'pickFaceLocationTextBox' || document.activeElement.id === 'bulkLocationTextBox') {
                    if ($('#skuTextBox').val()) {
                        $('#skuTextBox').focus().select();
                    }
                    else {
                        if (isMobile) {
                            $('#skuTextBox').focus().select();
                        }
                        else {
                            $('#skuTextBox').focus();
                        }
                    }
                }
                else {
                    if (window.location.href.indexOf('ConfirmReplenishmentPickFace') > -1) {
                        if ($('#qtyPutAwayNumericTextBox').val()) {
                            $('#qtyPutAwayNumericTextBox').focus().select();
                        }
                        else {
                            if (isMobile) {
                                $('#qtyPutAwayNumericTextBox').focus().select();
                            }
                            else {
                                $('#qtyPutAwayNumericTextBox').focus();
                            }
                        }
                    }
                    else {
                        $('#next-btn').trigger('click');
                    }
                }
                break;                
            default:
                break;
        }

        e.preventDefault();
    }
});
0
danjackknife