牛骨文教育服务平台(让学习变的简单)
博文笔记

移动端监听手机键盘弹起和关闭(Ionic+Cordova)

创建时间:2017-06-22 投稿人: 浏览次数:2247

如果你的页面有动态计算滚动区域,比如像这样:

<ion-content has-bouncing="false">
    <ion-scroll ng-if="downKeyboard" delegate-handle="detailTabList" has-bouncing="true" scrollbar-y="false" zooming="false" direction="y" ng-style="{"height":ionScrollHeight}">
       <div>
          <ul>
              <li ng-repeat="item in data">
                 <label>{{data.title}}</label>
                 <input type="text" >
             </li>
          </ul>
       </div>
    </ion-scroll>
</ion-content>
height : ionScrollHeight为页面初始化计算的滚动区域高度

在Controller.js里面写到:

$scope.ionScrollHeight = (window.innerHeight - 44) + "px";
那么问题来了。外面的ion-scroll的高度在初始化的时候已经获得了ionScrollHeight 高度。但是你点击input掉起软键盘。会撑起ion-scroll的高度
但是在关闭软键盘后。ionScrollHeight的值就不存在了。所有需要监听键盘关闭重新把 ionScrollHeight赋值
1:首先需要你的项目打ionic-plugin-keyboard插件。如果没打可以执行cordova plugin add ionic-plugin-keyboard --save
2:如何查询自己的项目有没有打过插件ionic plugin list //列出所有已安装插件
3:在你的控制器中写出监听function
$scope.ionScrollHeight = (window.innerHeight - 44) + "px";
$scope.downKeyboard = true;
window.addEventListener("native.keyboardhide", function (e) {
  // todo 进行键盘不可用时操作
  $scope.downKeyboard = false;
  $scope.ionScrollHeight = (window.innerHeight - 44) + "px";
  $scope.$apply();
});





声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。