Question

这是我的应用程序中的一个简单表单。当尝试在表单中输入用户详细信息时，android键盘隐藏了电子邮件字段和移动无字段。我无法向上滚动页面。请给我一个解决方案 enter image description here

<ion-content>
  <form novalidate="novalidate" on-valid-submit="saveUserDetails()">
    <div class="list card">
      <label class="item item-input validated">
        <span class="input-label">First Name</span>
        <input type="text" ng-model="user.firstName" required="required" name="firstName" autocomplete="off" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Last Name</span>
        <input type="text" ng-model="user.lastName" required="required" name="lastName" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Email</span>
        <input type="email" ng-model="user.email" required="required" name="email" class="textclr">
        <i class="icon ion-alert-circled error col col-10"></i>
      </label>
      <label class="item item-input validated">
        <span class="input-label">Mobile</span>
        <input type="tel" ng-model="user.mobile" name="number" required="required" class="textclr">
      </label>
    </div>
    <div class="padding">
      <button type="submit" class="button button-block button-positive activated">
        Save user
      </button>
    </div>
  </form>
  <ion-content>

Answer 1

在app.js文件中，添加以下文本行。我已将此代码添加到app.js

中名为“run”的函数中

＆＃13;

ionic.Platform.isFullScreen = true;

＆＃13;

$ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
	ionic.Platform.isFullScreen = true;
  });
})

＆＃13;

步骤2是在phonegap config.xml文件中包含离子键盘插件。以下是您需要包含的代码行：

＆＃13;

<gap:plugin name="com.ionic.keyboard" />

＆＃13;

Answer 2

您可以使用ion-scroll-delegate手动向上滚动键盘显示。例如：

＆＃13;

angular.module('MyApp')

.run([
  '$rootScope',
  '$ionicPlatform',
  '$window',
  function(
    '$ionicPlatform',
    '$rootScope',
    '$window') {

    $ionicPlatform.ready().then(function() {

      function keyboardHandler(event) {
        $rootScope.$broadcast(event);
      }

      $window.addEventListener('native.keyboardshow', keyboardHandler('native.keyboardshow'));
      $window.addEventListener('native.keyboardhide', keyboardHandler('native.keyboardhide'));
    });
  }
])

.controller('formCtrl', [
  '$ionicScrollDelegate',
  '$rootScope',
  function(
    $ionicScrollDelegate,
    $rootScope) {

    var scroller = $ionicScrollDelegate.getByHandle('my-form');

    $rootScope.on('native.keyboardshow', function(event, data) {
      scroller.scrollBottom(); //resize() will work too.
    });

    $rootScope.on('native.keyboardhide', function(event, data) {
      scroller.scrollTop(); //resize() works here as well
    });

  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ion-content delegate-handle="my-form">
  <form novalidate="novalidate" on-valid-submit="saveUserDetails()">
    <div class="list card">
      <label class="item item-input validated">
        <span class="input-label">First Name</span>
        <input type="text" ng-model="user.firstName" required="required" name="firstName" autocomplete="off" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Last Name</span>
        <input type="text" ng-model="user.lastName" required="required" name="lastName" class="textclr">
      </label>
      <label class="item item-input validated">
        <span class="input-label">Email</span>
        <input type="email" ng-model="user.email" required="required" name="email" class="textclr">
        <i class="icon ion-alert-circled error col col-10"></i>
      </label>
      <label class="item item-input validated">
        <span class="input-label">Mobile</span>
        <input type="tel" ng-model="user.mobile" name="number" required="required" class="textclr">
      </label>
    </div>
    <div class="padding">
      <button type="submit" class="button button-block button-positive activated">
        Save user
      </button>
    </div>
  </form>
  <ion-content>

＆＃13;

您需要安装键盘插件：

https://github.com/driftyco/ionic-plugin-keyboard

以离子形式滚动

2 个答案: