HTML select标签在iOS的Ionic上无法显示“完成”标签

Question

我正在使用Ionic框架构建iOS应用。当我使用select元素时，在iOS本地菜单中选择项目时，我没有得到带有标签“完成”的标题。但是在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>

- emccracken

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - you786

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

}

- lucasbastianik

---

太棒了！谢谢你！非常感激。我为什么要首先使用它呢？ - emccracken

不错！我真的不知道为什么Ionic项目带有这个隐藏功能处于活动状态。 - lucasbastianik

根据我的经验，“评论”代码并不能解决问题。我必须将“true”更改为“false”，然后以这种方式运行代码，才能消除该烦人的问题；cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); - Average Joe

Answer 2

关于 @emccracken 评论中提到的问题，据Ionic团队表示，hideKeyboardAccessoryBar的原因是“因为原生应用很少有访问条。这是一个明显的特征，表明应用是使用Web技术构建而成，而不是本地应用程序。”

你可以按需显示或隐藏辅助栏，这里有一些解释。对我来说，将指令中的 $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);
        }
      });
    }
  };
})

- whatsthatitspat

---

过去两个月以来，这不再起作用。 Ionic的键盘插件会在你进行更改后覆盖你的更改，所以你要么始终使用附件栏，要么始终不使用附件栏。这真的有点愚蠢。 - A. Vin

Answer 3

如果使用Ionic capacitor并面临这些问题，则这里的任何修复方法都不起作用。根据Capacitor discussions，这是Keyboard插件的副作用。可以通过执行以下操作来修复：

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

...

Keyboard.setAccessoryBarVisible({isVisible: true});

- dgropp

Answer 4

如果您仍然遇到此问题，我的情况是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);

希望能对您有所帮助。

- JavierE