Question

我使用材料ui v0.20.0并且我必须禁止为具有TextField的用户保存密码。我添加道具到TextField autocomplete =＆＃39; nope＆＃39;因为并非所有浏览器都能理解autocomplete =＆＃39; off＆＃39;似乎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 =＆＃39; off＆＃39;

Answer 1

自动完成功能必须位于inputProps内部

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

是个好方法

Answer 2

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

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

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

Answer 3

尝试使用noValidate道具将textfield封装在form标记内。例如：

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

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

Answer 4

固定。只需要添加上面的实际输入字段

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'
      ... 
    />

Answer 5

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

autoComplete =“新密码”

所以您将得到类似以下输入的内容：

<TextField
 autoComplete="new-password"
/>

例如，这对于避免登录页面上的浏览器提供更多样式很有帮助。

希望这对其他人有帮助！

Answer 6

输入道具和文本字段道具的 autoComplete 属性旨在跟在 HTML spec 之后。

它似乎对我们中的一些人不起作用。奇怪的是，我没有看到规范中列出了 off，但它没有为我关闭它，而诸如 nope、nahhhh 之类的字符串做 -这是规范中没有的字符串。

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

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

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

Answer 7

您不再需要提供autoComplete =＆＃39; off＆＃39;对于主分支上的AutoComplete组件。它是默认添加的。

查看this thread了解详情。

Answer 8

这对我有用：

每当您要禁用密码字段（也包括上述字段）的自动填充功能时，只需将其输入密码即可：

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

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

Answer 9

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

primary: {
  main: "#000000"
}

如果输入的类型为=“ password”，则“ new-password”有效如果“常规”字段以表格形式包装，则“关闭”有效

Answer 10

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

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

应为autoComplete ='off'

autoComplete='off'

Answer 11

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

请勿在TextField组件上设置type =“ password”

DO在输入道具上将其与auto C 一起设置为“ new-password”：

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

Answer 12

关键是使用浏览器以前从未用用户填写的任何形式（例如“＆＃6＃+”或“ PedroView”）保存的随机文本。这也将解决Chrome浏览器的自动完成问题，该问题会将所有字段保留为蓝色背景。

<TextField
     autoComplete='PedroView'
/>

// MUI的最新版本

<TextField
     autoComplete='off'
/>

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

12 个答案: