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

Question

我使用的是材料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'

Answer 1

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

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

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

Answer 2

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

自动完成=“新密码”

所以你会有这样的输入：

<TextField
 autoComplete="new-password"
/>

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

希望这对其他人有帮助！

Answer 3

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

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

我不知道为什么 autoComplete 道具不起作用。但上述工作。

Answer 4

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

<TextField
     autoComplete='ViewCrunch'
/> 

//MUI的最新版本

<TextField
     autoComplete='off'
/>

Answer 5

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

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

应该是autoComplete ='off'

autoComplete='off'

Answer 6

自动完成必须在 inputProps 内

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

是个好方法

Answer 7

固定的。只需要在上面添加真实的输入字段即可

\n\n

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN\n https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 -medium\n 在 EDGE、Chrome（最新 v63）、Firefox Quantum (57.0.4 64-\xd0\xb1\xd0\xb8\xd1\x82)、Firefox(52.2.0)\n 上测试\n 假字段是一种解决方法chrome/opera 自动填充得到错误的字段

\n\n

 const fakeInputStyle = {opacity: 0, float: \'left\', border: \'none\', height: \'0\', width: \'0\'}\n\n <input type="password" name=\'fake-password\' autoComplete=\'new-password\' tabIndex=\'-1\' style={fakeInputSyle} />\n\n  <TextField\n  name=\'userName\'\n  autoComplete=\'nope\'\n  ... \n/>\n\n<TextField\n      name=\'password\'\n      autoComplete=\'new-password\'\n      ... \n    />\n

\n

Answer 8

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

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

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

Answer 9

输入属性和文本字段属性的属性autoComplete应遵循HTML 规范。

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

所以我解决了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 10

您不再需要为主分支上的 AutoComplete 组件提供 autoComplete='off'。默认情况下会添加它。

检查此线程以获取更多详细信息。