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

Question

我正在使用 ionic 1。因为我有一个带有两个输入字段的屏幕。因此，每当用户来到该屏幕时。我的第一个输入字段应该会自动触发，用户必须输入值。

意思是……！当用户来到我的屏幕时，它会强制用户或自动在我的第一个输入字段中显示闪烁的光标以输入值。

我怎样才能做到这一点？

这是我的代码：

 <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。

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('/');
}

<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>

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

ionic 1 how to trigger input filed first to enter value

input-field

angularjs

hybrid-mobile-app

ionic-framework