我有一个应用程序的登录屏幕,启动时,“用户名”输入自动获得焦点并弹出键盘。当键盘弹出我的登录屏幕的内容时,向上推,导致尺寸错误。
如何防止第一次输入的自动对焦?
还有一点要注意,这只发生在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>
答案 0 :(得分:1)
您可以使用tabindex
属性来指导焦点。将其设置为-1
将永远不会自动对焦。
答案 1 :(得分:0)
我唯一注意到的是
<center style="position:relative;">
因为它是包含整个布局的div,所以它不应该设置为relative!,也许你应该将它设置为绝对。