How to make ons-input autofocus like input tag
-
Is there a way to make it autofocus after the page is open?
-
HI,
Please try the following example.
Please note that for <input> use .focus(), but for <ons-input> use ._input.focus().
<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> <template id="page1.html"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button onclick="document.querySelector('#myNavigator').pushPage('page2.html')">Push page</ons-button> </ons-page> </template> <template id="page2.html"> <ons-page> <ons-toolbar> <div class="center">Ons-Input</div> </ons-toolbar> <div style="text-align: center; margin-top: 30px;"> <p> <ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input> </p> <p> <ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input> </p> <p style="margin-top: 30px;"> <ons-button onclick="login()">Sign in</ons-button> </p> </div> <script> ons.getScriptPage().onShow = function() { document.getElementById("username")._input.focus(); } </script> </ons-page> </template>
Best Regards
Gobi
-
@gobiyau thank you for answering my question, it’s work
-
In Onsen version 2.11.2, blur and focus methods for input elements have been added.
Best Regards,
Gobi
-
Very helpful thread… mobdro