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

最新推荐文章于 2025-03-03 17:56:37 发布

Gherardo

最新推荐文章于 2025-03-03 17:56:37 发布

阅读量4.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u011391655/article/details/73558348

本文介绍如何在Ionic+Cordova项目中监听移动端设备键盘的弹起和关闭，这对于处理页面滚动区域的动态计算至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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