material-ui TextField 禁用浏览器自动完成答案

【问题标题】：material-ui TextField disable Browser autoCompletematerial-ui TextField 禁用浏览器自动完成
【发布时间】：2018-06-26 12:12:04
【问题描述】：

我使用material ui v0.20.0，我必须禁止使用TextField 为用户保存密码。我向 TextField autocomplete='nope' 添加了道具，因为并非所有浏览器都理解 autocomplete='off'。 Chrome 63 的最新版本似乎不接受它。有时它不起作用，有时它起作用。我不明白为什么它如此忙碌。当 chrome 要求保存密码并且我保存它，然后我想编辑输入时，我仍然有这个：

  <TextField
         name='userName'
         floatingLabelText={<FormattedMessage id='users.username' />}
         value={name || ''}
         onChange={(e, name) => this.changeUser({name})}
         // autoComplete='new-password'

    /> 

    <TextField
        name='password'
        floatingLabelText={<FormattedMessage id='users.passwords.new' />}
        type='password'
        value={password || ''}
        onChange={(e, password) => this.changeUser({password})}
        autoComplete='new-password'
   />

看起来它可以在 Firefox(v57.0.4) 中运行

默认情况下 TextField 没有 autoComplete='off'

【问题讨论】：

添加autoComplete="new-password" 作为<TextField> 的道具是目前此评论的有效方式
这个案例在文档中得到了解释和介绍，它对我来说就像一个魅力material-ui.com/components/autocomplete/#autocomplete-autofill TL;DR 跨度>

标签： html forms input autocomplete material-ui

【解决方案1】：

您不再需要为 master 分支上的 AutoComplete 组件提供 autoComplete='off'。默认添加。

查看this thread了解更多详情。

【讨论】：

它与 AutoComplete 组件有关，不适用于 TexField 当我将自动完成传递给 texfield 时，react 会将其渲染为输入，但它不起作用。
它也适用于 Texfield。你不需要传递 autoComplete=“off” 它现在是默认的。
我为此添加了截图，看起来 TexField 默认没有自动完成。但是type='password'的问题，当我创建一个新用户并保存他的密码，然后创建新的，浏览器建议已经在浏览器中保存了以前的密码。我需要以管理员身份避免它

【解决方案2】：

已修复。只需在真实输入字段上方添加即可

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - 中等在 EDGE、Chrome(最新 v63)、Firefox Quantum (57.0.4 64-бит)、Firefox(52.2.0) 上测试假字段是 chrome/opera 自动填充获取错误字段的一种解决方法

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

  <TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

【讨论】：

这对我有用。很难相信这是禁用自动完成功能的唯一方法。

【解决方案3】：

这对我有用：

当您想禁用密码字段（也是上述字段）的自动填充功能时，只需将其输入您的密码输入：

<input type="password" name='any-filed-name-here-password' autoComplete='new-password' />

重要的是拥有autoComplete='new-password'

【讨论】：

【解决方案4】：

这似乎对我有用（我们正在使用带有 redux 形式的材料 ui）

 <Textfield
  inputProps={{
    autocomplete: 'new-password',
    form: {
      autocomplete: 'off',
    },
  }}
  />

"new-password" 如果输入是 type="password" 有效如果它是一个包含在表单中的常规文本字段，则“关闭”有效

【讨论】：

这把我逼疯了！谢谢。
一样！多么疯狂！再次感谢。
这不再起作用 Chrome 版本 91.0.4472.77 (Official Build) (x86_64) OSX
适用于 Chrome 97。谢谢。

【解决方案5】：

在 material-ui TextField 中禁用自动完成。它对我有用

<TextField
  name='password'
  autoComplete='off'
  type='text'
  ... 
/>

应该是 autoComplete='off'

autoComplete='off'

【讨论】：

确认：这适用于 Material UI (@material-ui/core: ^4.11.2)。于 2020 年 1 月 5 日测试。
如何关闭密码字段的自动完成功能？

【解决方案6】：

通过 Material UI 输入，您可以使用

autoComplete="新密码"

所以你会有这样的输入：

<TextField
 autoComplete="new-password"
/>

这对避免登录页面上的浏览器出现更多样式很有帮助。

希望这对其他人有所帮助！

【讨论】：

好的，谢谢！使用 Material UI 我刚刚对其进行了测试，即使使用 <TextField type="password" />，添加 autoComplete="new-password" 也会禁用电子邮件文本字段上的自动完成功能。

【解决方案7】：

我最近遇到了这个问题。我尝试了我在网上找到的所有内容，但最终对我有用的解决方法是执行以下操作。

不要在 TextField 组件上设置 type="password"

请在输入道具上将其与 autoComplete: 'new-password' 一起设置，如下所示：

<TextField
   label="Password"
   className={classes.textField}
   name="password"
   inputProps={{
      type:"password",
      autoComplete: 'new-password'
   }} />

【讨论】：

【解决方案8】：

尝试使用 noValidate 属性将 Textfield 包含在表单标签内。例如：

<form noValidate>
            <TextField
                label={'Enter Name'}
                required
                fullWidth
                autoFocus={true}
                value={text}
                onChange={(e) => (text = e.target.value)}
            />
</form>

我不知道 autoComplete 属性不起作用的原因是什么。但上述方法有效。

【讨论】：

使用其他替代方案也会弄乱Autocomplete element 的行为。这个解决方案对我有用，而不会影响自动完成行为。谢谢！
这是阻止 chrome 在 Material-UI 自动完成字段中自动填充 TextField 的唯一方法。其他答案均无效。
即使您在 Material UI 中将autoComplete 设置为关闭，chrome 仍会为您提供建议列表，我尝试了其他值，例如“无”，它适用于某些输入，但破坏了其他输入。这个解决方案对我有用。

【解决方案9】：

关键是使用浏览器之前未从用户填写的任何表单中保存的随机文本，例如“#+”或“ViewCrunch”。这也将解决 chrome 浏览器的自动完成问题，该问题将所有字段留在蓝色背景中。

<TextField
     autoComplete='ViewCrunch'
/>

//MUI 的最新版本

<TextField
     autoComplete='off'
/>

【讨论】：

【解决方案10】：

自动完成必须在 inputProps 中

<TextField
   inputProps={{
      autoComplete: 'off'
   }}
/>

是个好办法

【讨论】：

在输入中添加 autoComplete: 'off' 不会禁用自动完成
为我工作！谢谢！
这导致了缺少参数的问题，我认为包括 ...params.inputProps，可能是为我解决的问题，如链接答案所示，如果其他人有这个问题stackoverflow.com/a/65737792/3810321
如果你有其他 inputProps，是的！你应该扔掉这个！比如： inputProps={{ ...yourInputProps /* 或者你的名字 */ autoComplete: 'off' }}

【解决方案11】：

如 Material-UI documentation 中所述：将以下内容添加到 TextField。

<TextField
  inputProps={{
     ...params.inputProps,
     autoComplete: 'new-password',
   }}
 />

它禁用浏览器自动填充建议，也可用于自动完成的 TextField 组件。 注意：还有两个独立的属性 inputProps 和 InputProps。您可以将两者应用于同一项目。但是，inputProps 属性修复了自动完成问题。

【讨论】：

【解决方案12】：

输入道具和文本字段道具的autoComplete 属性应遵循HTML spec。

它似乎对我们中的一些人不起作用。奇怪的是，我没有在规范中看到 off，但它不会为我关闭它，而 nope、nahhhh 等字符串却是t 在规范中。

所以我选择了none，这似乎关闭了建议并保持整洁。

另外，设置文本字段的 autoComplete 属性对我不起作用...

<TextField
    className={classes.textfield}
    label='Invitees'
    placeholder='A comma seperated list of emails'
    variant='outlined'
    value={users}
    onChange={onChange}
    inputProps={{
        autoComplete: 'none',
    }}
/>;

【讨论】：

【解决方案13】：

如果自动完成功能不起作用，请保留它，但为组件添加一个唯一的“名称”属性

【讨论】：

【解决方案14】：

我要感谢@Elie Bsaisbes 回答https://stackoverflow.com/a/70000217/16538978 并扩展它

在我的一生中，autoComplete = "off" / new-password 等...仅适用于某些形式，而不能适用于其他形式。仅在镀铬中。最后，解决方案是添加一个自定义名称，如链接答案中所述，如下所示

             <TextField      
                name="noAutoFill"
                label="Password"
                variant="standard"
                defaultValue=""
                id="password"
                type="password"
              />

【讨论】：