Ionic for iOS 上未显示 HTML 选择“完成”标签答案

【问题标题】：HTML select "Done" label not showing on Ionic for iOSIonic for iOS 上未显示 HTML 选择“完成”标签
【发布时间】：2015-10-29 11:02:44
【问题描述】：

我正在使用 Ionic 框架构建一个 iOS 应用程序。当我使用选择元素时，在 iOS-native 的菜单中选择项目时，我没有得到带有“完成”标签的标题。但是，当我在 iOS/Safari 中使用该应用程序时，它会显示出来。附上截图和代码。对此的任何意见/解决方案将不胜感激。

截图：

iOS Safari 屏幕截图

iOS 原生/Ionic 屏幕截图

标记

<label class="item item-input item-select">
    <div class="input-label">
        Bostadstyp
    </div>
    <select ng-change="addParam('objectType', selectedHouseType)" ng-model="selectedHouseType" ng-options="houseType.id as houseType.label for houseType in houseTypes"></select>
</label>

【问题讨论】：

HTML SELECT on iOS Chrome doesn't show "Done" option的可能重复

标签： html angularjs cordova safari ionic

【解决方案1】：

Ionic 应用在 app.js 中包含隐藏键盘附件栏的默认代码，您需要注释以下行：cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

得到这样的东西：

// 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);
  cordova.plugins.Keyboard.disableScroll(true);

}

【讨论】：

太棒了！感谢那！非常感谢。我为什么要首先使用它？
不错！我真的不知道为什么 Ionic 的项目带有这个隐藏功能。
根据我的经验，评论它并没有削减它。我不得不将true 更改为false 并以这种方式运行。只有当您运行以下代码时，血腥问题才会消失； cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

【解决方案2】：

关于@emccracken 的评论，according to the Ionic Team the reason for hideKeyboardAccessoryBar is“因为原生应用很少有辅助栏。应用是用网络技术构建的而不是原生的，这简直是天方夜谭。”

您可以按需显示和隐藏附件栏explained a bit here。将 $timeouts 从指令中取出对我来说效果更好。这是我的样子。

.directive('select', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      element.bind('focus', function(e) {
        if (window.cordova && window.cordova.plugins.Keyboard) {
          // console.log("show bar (hide = false)");
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
        }
      });
      element.bind('blur', function(e) {
        if (window.cordova && window.cordova.plugins.Keyboard) {
          // console.log("hide bar (hide = true)");
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
      });
    }
  };
})

【讨论】：

这在过去 2 个月内不再有效。 Ionic 的键盘插件会在您完成更改后覆盖您的更改，因此您要么 100% 的时间卡在附件栏上，要么 100% 的时间没有附件栏。这真的有点愚蠢。

【解决方案3】：

如果你仍然有这个问题，我的情况是键盘插件冲突 cordova-plugin-keyboard 和 cordova-plugin-ionic-keyboard。

因此请检查 config.xml 以查看您是否有多个插件，如果有，请删除：

cordova 插件删除 [plugin-name]

然后安装合适的插件：

ionic cordova 插件添加 ionic-plugin-keyboard

https://ionicframework.com/docs/native/keyboard/

然后你就可以使用cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

希望对你有帮助。

【讨论】：

【解决方案4】：

如果使用离子电容器并遇到这些问题，这里的任何修复都不会起作用。根据Capacitor discussions，这是Keyboard 插件的副作用。可以通过以下方式修复：

import {Keyboard} from "@capacitor/keyboard";

...

Keyboard.setAccessoryBarVisible({isVisible: true});

【讨论】：