Monaca Onsen UI Discord Chat Github Repo

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