I'm trying to use the javascript function focus(), but it does not work on safari mobile. How do I fix this problem?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
window.onload=function() {
document.getElementById('username').focus();
}
</script>
</head>
<body>
<input type="text" id="username" >
<input type="text" >
</body>
</html>
I'm trying to use the javascript function focus(), but it does not work on safari mobile. How do I fix this problem?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
window.onload=function() {
document.getElementById('username').focus();
}
</script>
</head>
<body>
<input type="text" id="username" >
<input type="text" >
</body>
</html>
2 Answers
Reset to default 4iOS does not allow .focus() to be fired automatically for security reason.
I was having the same problem with an Angular app, and I solved it with a very simple hack.
For starters, you might want to use jQuery; it makes a lot of things clear-cut for you and is more-or-less fully supported. Then, try doing this:
$( document ).ready( function() {
setTimeout( $( '#username' ).focus(), 0 );
});
Now, I don't exactly know how it works; maybe some rendering issue. But it works for sure.
If you want VanillaJS:
window.onload = function() {
setTimeout( document
.getElementById( 'username' ).focus(), 0 );
}
I don't know if the VanillaJS version will work.