【发布时间】：2022-01-23 23:56:48
【问题描述】：
我有一个应用程序的登录屏幕，在启动时，“用户名”输入会自动获得焦点并弹出键盘。当键盘弹出我的登录屏幕内容时会向上推导致尺寸错误。
如何防止第一个输入的自动对焦？
还有一点需要注意的是，这只发生在 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>
【问题讨论】：
标签： css html angularjs ionic-framework