Ionic1代码在Ionic3环境下选择器Done按钮消失问题排查

我之前处理过类似的跨版本适配问题，结合你描述的情况，这大概率是Ionic 3对键盘插件和表单元素的默认行为做了调整，咱们一步步来排查恢复：

1. 排查 Cordova 键盘插件的配置与版本 #

旧的cordova-plugin-keyboard在Ionic 3环境下兼容性不佳，建议换成官方推荐的插件：

• 先卸载旧插件再重装：

  cordova plugin remove cordova-plugin-keyboard
  cordova plugin add cordova-plugin-ionic-keyboard
  

• 打开config.xml，添加或确认以下配置，确保键盘的辅助工具栏（包含Done按钮）不被隐藏：

  <preference name="KeyboardDisplayRequiresUserAction" value="false" />
  <preference name="KeyboardHideFormAccessoryBar" value="false" />
  

  其中KeyboardHideFormAccessoryBar设为false是关键，它控制着是否显示包含Done按钮的工具栏。

2. 调整选择器模板与控制器代码 #

Ionic 3对ion-select的默认属性做了变更，需要显式指定Done按钮的相关设置：

• 在你的选择器HTML模板中，添加done-text属性明确按钮文本：

  <ion-select done-text="Done" cancel-text="Cancel">
    <!-- 你的选项列表 -->
  </ion-select>
  

• 检查controller.js中是否有手动隐藏键盘工具栏的代码，比如类似这样的语句：

  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  

  如果有，把true改成false，或者直接注释掉这行，避免工具栏被强制隐藏。

3. 配置Ionic 3全局键盘行为 #

如果你的项目已经部分迁移到Ionic 3的Angular结构，或者保留了Ionic 1的JS写法，都需要在全局初始化时设置键盘行为：

• 纯Ionic 1 JS写法（在run阶段配置）：

  angular.module('yourApp').run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if(window.cordova && window.cordova.plugins.Keyboard) {
        // 确保工具栏不隐藏
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
      }
    });
  });
  

• 若使用Ionic 3的Angular写法（在app.component.ts中配置）：

  import { Component } from '@angular/core';
  import { Keyboard } from '@ionic-native/keyboard/ngx';
  
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
  })
  export class AppComponent {
    constructor(private keyboard: Keyboard) {
      this.initializeApp();
    }
  
    initializeApp() {
      this.keyboard.hideKeyboardAccessoryBar(false);
    }
  }
  

4. 编译测试 #

完成以上修改后，重新编译运行项目：

ionic cordova run ios  # 或 ionic cordova run android

如果Done按钮仍未显示，可以打开真机调试或浏览器开发者工具，查看控制台是否有插件加载失败、属性被覆盖等报错信息，进一步定位问题。

内容的提问来源于stack exchange，提问作者Axil