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

Posted 2023-03-05

【中文标题】material-ui TextField 禁用浏览器自动完成

【英文标题】：material-ui TextField disable Browser autoComplete

【发布时间】：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 跨度>

【参考方案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，可能是为我解决的问题，如链接答案所示，如果其他人有这个问题***.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://***.com/a/70000217/16538978 并扩展它

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

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