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 ...
Dass einzige was unter iOS funktioniert ist, wenn man das Auswählen selbst auslöst:
(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:(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:
(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):
Über ein drittes Element zu gehen hat auch nichts gebraucht: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
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>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>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>Ü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>(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