prevent first input focus in ionic

Question

i have a login screen to application and when launching,the 'username' input gets the focus automatically and pops out the keyboard. when the keyboard pops out contents of my login screen pushes up resulting in wrong dimensions.

How can i prevent this auto focusing of the first input ?

And also a point to note is this only happens in iOS. In android it works just fine.

This is how it is displayed when the application is launched(Blocking the fields and pushing the contents up)

Here's my code

<ion-view title="*************" hide-back-button="false" >

  <ion-content class="has-header" scroll="false" >




  <center style="position:relative;">

<div id="logo">
           <img src="img/lof_logo.png" style="margin-top:40px;" class="img-responsive" width="270"/>
        </div>




  <div  class="box on fadein fadeout " ng-show="toggle" ng-animate="'box'"  style="z-index:1"  >


      <div  class="container" ng-controller="LoginController">

      <form id="ftForm" name="form" autocomplete="off" novalidate shake-that  ng-submit="login(credentials)" novalidate>


          <div class="panel-body">
            <div class="form-group box-shadow" ng-class="{'has-error': form.name.$invalid && submitted}">

             <input style="padding-left:5px;"
                 type="text"
                 class="form-control"
                 id="username"
                 name="username"
                 placeholder="User Name"
                 ng-model="credentials.username"
                 ng-model-options="{updateOn: 'blur'}"
                 required>
            </div>
            <div class="form-group box-shadow" ng-class="{'has-error': form.password.$invalid && submitted}">

              <input style="padding-left:5px;"
                type="password"
                class="form-control"
                id="password"
                name="password"
                placeholder="Password"
                ng-model="credentials.password"
                required>
            </div>


          </div>

<div class="box-shadow" >


 <button type="submit" class="btn btn-primary btn-block" >Login</button>

</div>
      </form>

      <div class="alert alert-success message" ng-show="showMessage">Well done!</div>

    </div>


  </div>

<a href="#"> 

    <img src="img/online_banking_bg.png" class="img-responsive" style="margin-top:40px; z-index: 1; margin-bottom:40px; " ng-click="toggle = !toggle" />

 </a> 
<ion-scroll zooming="false" direction="y" style="height:250px;">




    <div class="row" style="text-align: center;">
          <div class="col">

               <a style="font-size: 20px; color:" href="#/app/services/product">
                  <i class="icon ion-arrow-graph-up-right" style="font-size: 50px;"></i>
                           <h5>Products and Services</h5>

                </a>

          </div>
          <div class="col">

             <a style="font-size: 20px; color:" href="#/app/services/locations">
                  <i class="icon ion-android-location" style="font-size: 50px;"></i>
                           <h5>Locate a Branch / ATM</h5>

            </a>
          </div>

    </div>
     <div class="row" style="text-align: center;">
          <div class="col">

               <a style="font-size: 20px; color:" href="#/app/services/calc">
                  <i class="icon ion-ios7-calculator" style="font-size: 50px;"></i>
                           <h5>Financial Calculator</h5>

                </a>

          </div>
          <div class="col">

             <a style="font-size: 20px; color:" href="#/app/services/news">
                  <i class="icon ion-ios7-world-outline" style="font-size: 50px;"></i>
                           <h5>News and CSR</h5>

            </a>
          </div>

    </div>
     <div class="row" style="text-align: center;">
          <div class="col">

               <a style="font-size: 20px; color:" href="#/app/services/promotion">
                  <i class="icon ion-android-promotion" style="font-size: 50px;"></i>
                           <h5>Promotions and Offers</h5>

                </a>

          </div>
          <div class="col">

             <a style="font-size: 20px; color:" href="#/app/services/contact">
                  <i class="icon ion-ios7-telephone" style="font-size: 50px;"></i>
                           <h5>Contact and Feedback</h5>

            </a>
          </div>

    </div>

     <br/><br/>

 </ion-scroll>

 <!-- 

    <div class="item item-text-wrap">
                  <div class="button-bar">
                      <a class="button" href="#/app/services/product">Small</a>
                      <a class="button" href="#/app/account/balance">Medium</a>
                      <a class="button" ng-click="showImage(3)">Very large</a>
                  </div>
    </div>

-->
</center>
<script id="image-modal.html" type="text/ng-template">
              <div class="modal image-modal transparent">
                  <ion-pane class="transparent">
                     <img ng-src="{{imageSrc}}" class="fullscreen-image"/>
                  </ion-pane>
              </div>
    </script>

  </ion-content>
</ion-view>

Answer 1

Inspired by Github: xclusive36 commented on Nov 27, 2020

To force ion-input to not steal focus, Set ion-button/ion-input with attribute tabIndex="-1",

<ion-item> <ion-input tabindex="-1">foo</ion-input> <ion-button tabindex="-1" >foo</ion-button></ion-item>

As a side effect, the ion-button will take on a border when focused. Add to css to remove the border.

ion-input:focus{ outline: none; }
ion-button:focus{ outline: none; }

Answer 2

You can use tabindex attribute to direct the focus. Setting it to -1 will never auto focus.