如何在反应离子应用程序中将 ios 键盘返回按钮更改为下一步/完成？

Posted 2023-02-23

【中文标题】如何在反应离子应用程序中将 ios 键盘返回按钮更改为下一步/完成？

【英文标题】：How to change the ios keyboard return button to next/done in an react ionic app?

【发布时间】：2020-12-27 04:43:17

【问题描述】：

我正在尝试在我的 ionic react 应用程序中将返回按钮更改为下一步/完成按钮。我将它用于 redux 表单，我完全不知道我是否应该在 react 代码中执行此操作，或者是否在 Xcode 中构建的 swift 代码中。

如果有人可以将我引导到正确的地方或有它的链接，那就太好了。

【问题讨论】：

这是你需要迅速做的事情，而不是反应developer.apple.com/documentation/uikit/uitextinputtraits/…

【参考方案1】：

从 Chrome 77+ 和 ios Safari 13.4+ 开始，您可以使用 enterkeyhint 属性。

Ionic 博客的以下帖子中特别提到了此属性：https://ionicframework.com/blog/keyboard-improvements-for-ionic-apps/

enterkeyhint 属性允许开发人员指定应为“Enter”键显示哪种类型的操作标签或图标。使用enterkeyhint 可以让用户预览当他们点击“Enter”键时会发生什么。此处应指定的值取决于用户正在执行的操作的上下文。例如，如果用户在搜索框中输入内容，开发人员应确保输入内容为enterkeyhint="search"。

根据HTML standard，可用值为：

enter：用户代理应该为“输入”操作提供提示，通常插入一个新行。 done：用户代理应该提示操作“完成”，这通常意味着无需输入任何内容，输入法编辑器 (IME) 将关闭。 go：用户代理应该为“go”操作提供提示，通常意味着将用户带到他们输入的文本的目标。 next：用户代理应该为“下一步”操作提供提示，通常将用户带到下一个接受文本的字段。 previous：用户代理应该为“上一个”操作提供一个提示，通常将用户带到将接受文本的上一个字段。 search：用户代理应该为“搜索”操作提供提示，通常将用户带到搜索他们输入的文本的结果。 send：用户代理应该为“发送”操作提供一个提示，通常将文本传递给它的目标。

感谢Stefan Judis 制作的这个惊人的开发表，您可以看到每个选项的外观

这里是一个使用enterkeyhint的例子：

<ion-item>
  <ion-label>Message: </ion-label>
  <ion-input enterkeyhint="send"></ion-input>
</ion-item>

【讨论】：

这不适用于我的 ios 模拟器。你知道这是否应该像那样工作吗？

@KaseyKaufmann 嗯，你在模拟器中使用的是哪个 iOS 版本？

我正在使用 iOS 12.0 @sebaferreras

@KaseyKaufmann enterkeyhint 属性是在 iOS Safari 13.4+ 中引入的，所以这可能是它在 iOS 12.0 上不起作用的原因。您能否尝试使用更新版本的 iOS，例如 13.5 或更高版本？

我刚刚在装有 iOS 14 的手机上试了一下，它仍然只使用返回按钮。