如何在反应本机纸张 TextInput 上禁用自动完成功能？在网络上使用 autoComplete="off" 呈现 autocomplete="noop"

Posted 2023-02-21

【中文标题】如何在反应本机纸张 TextInput 上禁用自动完成功能？在网络上使用 autoComplete="off" 呈现 autocomplete="noop"

【英文标题】：How to disable autocomplete on react native paper TextInput? with autoComplete="off" render autocomplete="noop" on the web

【发布时间】：2020-09-10 08:33:40

【问题描述】：

我正在尝试使用来自react-native-paper 3.10.1 的TextInput 在网络上禁用autocomplete

<TextInput
  name="city"
  textContentType="addressCity"
  autoComplete="off"
  mode="outlined"
/>

autoComplete="off" 在呈现的 html 中被替换为 autocomplete="noop"，这会导致自动完成功能不会被禁用。

noop 来自哪里，如何禁用自动完成功能？

复制

https://snack.expo.io/@kopax/curious-pizza

【参考方案1】：

你需要传递的道具是autoCompleteType='off'。您可以在此处找到有关 react-native 提供的 TextInput 组件的道具的更多信息（React Native Paper 的 TextInput 也扩展了谁的道具）。 https://reactnative.dev/docs/textinput.html#autocompletetype

【讨论】：

你可以在这里查看：snack.expo.io/@kopax/curious-pizza-2 它没有帮助。请记住，我使用它来定位网络，生成的 html 是您应该考虑的。

我相信 autoCompleteType 仅适用于 android 并且根据此更新，该属性假定为 autoComplete='off'：github.com/facebook/react-native/issues/26003。但它不起作用

【参考方案2】：

react-native-webAPI 中的TextInput 表示它遵循The HTML autocomplete attribute，但它不起作用。然而，它似乎遵循aria-autocomplete。

react-native 中的 TextInput 遵循它自己的 API。但是有 this issue 将 react native 中的 prop 从 autoCompleteType 重命名为 autoComplete。所以在编写 React Native 文档时也需要更新。

解决办法：

<TextInput
  autoComplete= Platform.OS === 'web' ? 'none' : 'off' 

测试于：

expo: 42.0.4
react-native: 0.63.2 (https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz)
react-native-web (version): 0.13.18
react: 16.13.1
Browser: Chrome 96.0.4664.110