css - 防止 ionic 中的第一个输入焦点

Question

我有一个应用程序登录屏幕，启动时，“用户名”输入会自动获得焦点并弹出键盘。当键盘弹出时，我的登录屏幕的内容会向上推，导致尺寸错误。

如何防止第一次输入自动对焦？

还有一点要注意，这只发生在 iOS 中。在 android 中它工作得很好。

应用启动时是这样显示的(屏蔽字段，上推内容)

这是我的代码

<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

您可以使用tabindex 属性来引导焦点。将其设置为 -1 将永远不会自动对焦。