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