Apple iPhone Forum und Community

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.

Bei allen Desktop-Browsern (FF, Opera, Chrome, Safari, ...) genügt das html5 Attribut "autofocus", neben den JS Funktionen (select(); focus; click(); ...), unter iOS funktioniert aber überhaupt nichts ...

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

    </body>

</html>

Dass einzige was unter iOS funktioniert ist, wenn man das Auswählen selbst auslöst:

Code:
<!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!'/></p>

        <p><input/></p>

        <p><button onclick="document.getElementById('hier').select();">fokus</button></p>

    </body>

</html>

(Aber das will ich nicht)

Hier einige weitere Versuche die ich getestet habe, die aber nicht funktionieren:

Über JS warten bis die Seite geladen ist und dann das input-Feld auswählen geht nicht:

Code:
<!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();

                //hier.setSelectionRange(0, 9999);

                //document.getElementById("hier").selectionStart = 0

                //document.getElementById("hier").selectionEnd = 999

                //hier.select();

                return true;

            }

            function fertigGeladen() {

                if (document.readyState == "complete") {

                    fokusSetzen();

                } else {

                    setTimeout('fertigGeladen()', 500);

                }

            }

            setTimeout('fertigGeladen()', 500);

        </script>

    </head>

    <body>        

        <p><input/></p>

        <p><input id='hier' placeholder='Fokus hier!'/></p>

        <p><input/></p>

    </body>

</html>

(Dabei habe ich alle auskommentierten Funktionen auch getestet)

Mit Hilfe des "onload"-Ereignisses abzuwarten und dann das input-Feld per JS auswählen geht auch nicht:

Code:
<!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();

                //hier.setSelectionRange(0, 9999);

                //document.getElementById("hier").selectionStart = 0

                //document.getElementById("hier").selectionEnd = 999

                //hier.select();

                return true;

            }

        </script>

    </head>

    <body onload="fokusSetzen();">

        <p><input/></p>

        <p><input id='hier' placeholder='Fokus hier!'/></p>

        <p><input/></p>

    </body>

</html>

(Hier auch alle auskommentierten Funktionen getestet)

Über ein zweites Element gehen und dann das input-Feld auswählen geht auch nicht (hab ich irgendwo in einen workaround gelesen):

Code:
<!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();

                //hier.setSelectionRange(0, 9999);

                //document.getElementById("hier").selectionStart = 0

                //document.getElementById("hier").selectionEnd = 999

                //hier.select();

                return true;

            }

        </script>

    </head>

    <body onload="document.getElementById('clickelement').click();">

        <div id="clickelement" onclick="fokusSetzen();"></div>

        <p><input/></p>

        <p><input id='hier' placeholder='Fokus hier!'/></p>

        <p><input/></p>

    </body>

</html>

Über ein drittes Element zu gehen hat auch nichts gebraucht:

Code:
<!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').click();

                hier.click();

                return true;

            }

        </script>

    </head>

    <body onload="document.getElementById('clickelement').click();">

        <div id="clickelement" onclick="fokusSetzen();"></div>

        <p><input/></p>

        <label id='hier'>Fokus: <input placeholder='Fokus hier!'/></label>

        <p><input/></p>

    </body>

</html>

Ich habe auch Kombinationen der Versuche getestet ... ohne Erfolg.
(Unter den Desktop Browsern funktionieren alle Versuche, unter iOS nicht)

Wisst ihr, wie man unter iOS ein input-Feld automatisch ausgewählen kann, damit man direkt dort tippen kann, ohne es erst selbst auszuwählen?

Getestet mit: iPhone5, iOS 6.1.4, Safari

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

Crys

Crys