HTML select "Done" 标签在 Ionic 上未显示 iOS

Question

我正在使用 Ionic-framework 构建一个 iOS-app。当我使用 select-elements 时，在 iOS-native 的菜单中选择项目时，我没有得到带有标签 "Done" 的 header。但是，当我在 iOS/Safari 中使用该应用程序时，它会出现。附上截图和代码。任何关于此的 input/solutions 将不胜感激。

截图：

iOS Safari 截图

iOSNative/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>

Answer 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);

}

Answer 2

关于@emccracken 的评论，according to the Ionic Team the reason for hideKeyboardAccessoryBar is "because native apps seldom have an accessary bar. It's a dead give away that an app is built with web tech and isn't native."

可以按需显示和隐藏辅助栏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);
        }
      });
    }
  };
})

Answer 3

如果你还有这个问题，我的情况是键盘插件之间的冲突 cordova-plugin-keyboard 和 cordova-plugin-ionic-keyboard.

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

cordova plugin remove [plugin-name]

然后安装合适的插件：

ionic cordova plugin add ionic-plugin-keyboard

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

那么你就可以使用cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

希望对您有所帮助。

Answer 4

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

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

...

Keyboard.setAccessoryBarVisible({isVisible: true});

HTML select "Done" 标签在 Ionic 上未显示 iOS

HTML select "Done" label not showing on Ionic for iOS

html

safari

angularjs

cordova

ionic