Question

我正在使用离子1.我有一个屏幕有两个输入字段。所以每当用户进入该屏幕时。我的第一个输入字段应该自动触发，用户必须输入值。

意味着......！当用户进入我的屏幕时，它强制用户或自动闪烁的光标应该在我的第一个输入fiels中显示以输入值。

我如何实现这一目标？

这里是我的代码：

 <div class="col-sm-8" style="border: 0.01px #696969 solid;
    border-radius: 7px;margin-right: 16px;">
              <input type="text" id="origin" placeholder="Type Your Location" class="form-control" ng-model="directions.origin" />
            </div>

提前致谢！1

Answer 1

您可以使用angular-autofocus来设置焦点。

只需将模块mp.autoFocus添加到您的应用模块并加载脚本即可。然后，您可以将焦点设置为第一个输入，并将auto-focus作为属性。

请查看下面的演示或此fiddle。

＆＃13;

angular.module('demoApp', ['ionic', 'mp.autoFocus'])
  .controller('mainController', MainController)
  .config(routes);


function MainController() {}

function routes($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      template: '<div>home route</div>'
    })
    .state('input', {
      url: '/input',
      template: '<div>First input: <input auto-focus ng-model="main.firstText"/>{{main.firstText}}</div>'
    });

  $urlRouterProvider.otherwise('/');
}

＆＃13;

<link href="https://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<script src="https://code.ionicframework.com/1.3.3/js/ionic.bundle.min.js"></script>
<script src="https://unpkg.com/angular-auto-focus@1.0.4"></script>
<div ng-app="demoApp" ng-controller="mainController as main">
  <ion-side-menus>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <button class="button ion-navicon-round" menu-toggle="left">
      </button>
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
        <ui-view></ui-view>
      </ion-content>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <a class="button" href="#/">Home</a>
          <a class="button" href="#/input">Input</a>
        </ion-list>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
</div>

＆＃13;

离子1如何首先触发输入字段输入值

1 个答案: