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

Posted 2023-03-05

【中文标题】Ionic for iOS 上未显示 HTML 选择“完成”标签

【英文标题】：HTML select "Done" label not showing on Ionic for iOS

【发布时间】：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的可能重复

【参考方案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);