How to make ons-input autofocus like input tag

naufal17

Is there a way to make it autofocus after the page is open?

gobiyau

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

naufal17

@gobiyau thank you for answering my question, it’s work

gobiyau

In Onsen version 2.11.2, blur and focus methods for input elements have been added.

Best Regards,
Gobi

ralphduke724

Very helpful thread… mobdro