JavaScript iOS input-Feld auswählen

Crys · 11. Mai 2013

Ich möchte das bei einem Formular, wenn man die Seite öffnet, ein bestimmtes input-Feld automatisch ausgewählt wird, sodass man direkt dort tippen kann.

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test</title> 
        <meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
        <script type='text/javascript'>
            function fokusSetzen() {
                document.getElementById('hier').focus();
                document.getElementById('hier').select();
                document.getElementById('hier').click();
                return true;
            }

            function fertigGeladen() {
                if (document.readyState == "complete") {
                    fokusSetzen();
                } else {
                    setTimeout('fertigGeladen()', 500);
                }
            }
            setTimeout('fertigGeladen()', 500);
        </script>
    </head> 
    <body>
        <form>
            <p><input/></p>
            <p><input id='hier'/></p>
            <p><input/></p>
            <p><button>senden</button></p>
        </form>
    </body>
</html>

Bei allen Desktop-Browsern (FF, Opera, Chrome, Safari, ...) genügt das focus() oder select(), unter iOS funktioniert aber nichts getestetes.

Ich möchte einfach, dass auch am iPhone ein input-Feld automatisch ausgewählt wird und man direkt dort was eintippen kann.

Wisst ihr wie?

iks-deh · 11. Mai 2013

Probier mal
DEINELEMENT.setSelectionRange(0, 9999);

Gefunden hier:
http://stackoverflow.com/questions/...n-an-input-field-on-ios-devices-mobile-safari

Crys · 11. Mai 2013

@ iks-deh:
Funktioniert nicht.

Bitte nur bestätigte Lösungen antworten! Ich suche nach der Lösung seit ein paar Tagen, die erst beste Antwort bei google ist es wohl nicht ...

Crys · 15. Mai 2013

Weiß niemand eine funktionieren Lösung?

Kennt jemand eine Seite, wo beim Seiten laden ein input-Feld automatisch ausgewählt wird?
(Kann ja sein, dass dies generell bei iOS/Safari nicht geht).

omaliesschen · 15. Mai 2013

Ganz schön frech.

Bitte nur bestätigte Lösungen antworten!

42

Es gibt nicht immer DIE Antwort.

Wenn Du dir den Link mal genauer ansiehst findest Du evtl. das hier:

Code:

// t is the input field
setTimeout(function() {
    t.setSelectionRange(0, 9999);
}, 1);

WhiteShark · 15. Mai 2013

Zuerst solltest du mal schauen was das onload-Event ist. Das mit diesem ständigen settimeout sieht ja übel aus.

Eventuell klappt es auch wenn man ein touchend triggert.

Crys · 15. Mai 2013

@ omaliesschen:
Frech finde ich das nicht. Ich finde es nur unnötig, wenn hier Lösungen genannt werden, die der Helfende selbst nicht als richtig validieren kann.

Die Lösung habe ich selbstverständlich getestet. Deshalb weiß das sie nicht funktioniert:

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test</title> 
        <meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
        <script type='text/javascript'>
            function fokusSetzen() {
                //document.getElementById('hier').focus(); // FF: ja | iOS: nein
                //document.getElementById('hier').select(); // FF: ja | iOS: nein
                //document.getElementById('hier').click(); // FF: ja | iOS: nein
                //hier.setSelectionRange(0, 9999); // FF: ja | iOS: nein
                document.getElementById("hier").selectionStart = 0 // ...
                document.getElementById("hier").selectionEnd = 999 // FF: ja | iOS: nein
                //hier.select(); // FF: ja | iOS: nein
                return true;
            }

            function fertigGeladen() {
                if (document.readyState == "complete") {
                    fokusSetzen();
                } else {
                    setTimeout('fertigGeladen()', 500);
                }
            }
            setTimeout('fertigGeladen()', 500);
        </script>
    </head> 
    <body>
        <form>
            <p><input/></p>
            <p><input id='hier' placeholder='Fokus hier!' autofocus/></p>
            <p><input/></p>
            <p><button>senden</button></p>
        </form>
    </body>
</html>

(alle Lösungen funktionieren im FF; Ich habe auch Variationen der geschrieben Funktionen getestet)

@ WhiteShark:
Ich habe es nicht getestet, aber onload sollte nicht funktionieren, da erst nach dem laden das Feld ausgewählt werden sollte!?
Zum Rest "touchend triggert": übersetze bitte auf verständlich. Kann damit nichts anfangen.

WhiteShark · 15. Mai 2013

Ich hatte heute Mittag vom Smartphone geschrieben, weswegen ich mich nur kurz gefasst hatte.

Das Event "load" wird erst gefeuert wenn die Seite fertig geladen ist. Ist also genau das was du brauchst.
Am einfachsten geht es so:

Code:

<body onload="fokusSetzen();">
...

Zeile 18 bis 25 kannst du dir dann vollkommen sparen.

Ein Event triggern bedeutet, das du ein Event manuell abfeuerst. Bspw kannst du über Javascript sagen, das er einen Klick auf einen Button simulieren soll. Dies ist ja etwas was du bereits mit click(), focus() und select() versucht hast.
Es gibt da natürlich schönere Methoden, aber das sprengt jetzt den Rahmen.
Dasselbe geht auch mit touchstart(), touchmove() und touchend().

Allerdings dürfte das nicht zum Erfolg führen, iOS scheint da wohl einen Bug zu haben und macht automatisch blur() wenn man per JS ein Element focusen will.
Es gibt aber wohl einen Workaround:
http://typeof.it/30/how-to-show-the-virtual-keyboard-using-javascript-in-ios/

Man gibt also einem anderem Element ein Click-Event und feuert dieses dann.
Etwa so

Code:

<body onload="document.getElementById('clickelement').click();">
<div id="clickelement" onclick="fokusSetzen();"></div>
...
</body>

Crys · 15. Mai 2013

@ WhiteShark:
Danke, gut erklärt. Man lernt nie aus ...

Wenn ich das direkt 'triggere' dann funktioniert das:

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test</title> 
        <meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
    </head> 
    <body>
            <p><input/></p>
            <p><input id='hier' placeholder='Fokus hier!' autofocus/></p>
            <p><input/></p>
            <p><button onclick="document.getElementById('hier').select();">fokus</button></p>
        
    </body>
</html>

Aber jede Möglichkeit, wenn ich das automatisch machen möchte, geht nicht:

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test</title> 
        <meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
    </head> 
    <body onload="document.getElementById('clickelement').click();">
        <div id="clickelement" onclick="document.getElementById('hier').select();"></div>
        
        <p><input/></p>
        <p><input id='hier'/></p>
        <p><input/></p>
    </body>
</html>

... sprich, das workaround funktioniert bei mir auch nicht .. wieso auch immer.

Geht auch nichts, wenn man über zwei Elemente geht:

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test</title> 
        <meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
    </head> 
    <body onload="document.getElementById('clickelement').click();">
        <div id="clickelement" onclick="document.getElementById('hier').click();"></div>
        
        <p><input/></p>
        <label id='hier'>Fokus: <input/></label>
        <p><input/></p>
    </body>
</html>

Beim FF scheint hingegen immer alles zu funktionieren.

Crys · 28. Mai 2013

Ich denke das es wirklich von iOS so gewollt ist, dass es nicht geht.
Schade, aber muss ich damit leben ...

Suche

JavaScript iOS input-Feld auswählen

Crys

Lt. Commander

iks-deh

Lt. Commander

Crys

Lt. Commander

Crys

Lt. Commander

omaliesschen

Gast

WhiteShark

Admiral

Crys

Lt. Commander

WhiteShark

Admiral

Crys

Lt. Commander

Crys

Lt. Commander

Ähnliche Themen