Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5

Autoselect bzw. Autofocus für iOS
#1
Question 

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
Zitieren
#2

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




Benutzer, die gerade dieses Thema anschauen: