javascript React材料Ui文本字段类型密码禁用自动填充从浏览器时，重点放在它

1qczuiv0 于 2023-03-16 发布在 Java

关注(0)|答案(2)|浏览(99)

我正在使用react material UI 4，当我关注来自TextField的密码字段时，我想禁用浏览器自动填充/自动完成建议。
我的要求是不显示建议，当我们把重点放在该字段和字段类型是密码。用户名和电子邮件，它是工作，但由于某种原因，它是不工作的密码字段。

我已经尝试低于approoch，但没有工作

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

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

=====================
<TextField
 autoComplete="new-password"
/>

=========================
//Below works but then this field no more acts as a password field

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

任何帮助都将不胜感激。谢谢

JavaScript

来源：https://stackoverflow.com/questions/71832062/react-material-ui-textfield-type-password-disable-autofill-from-browser-when-foc

2条答案

按热度按时间

acruukt91#

试试我下面添加的方法。它对我很有效。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

更新答案：<TextField autoComplete="chrome-off" />
如果你还有什么问题就告诉我。

赞(0）回复(0）举报 2023-03-16

krcsximq2#

const [readOnly, setReadOnly] = useState(true)

// render

<TextField
 label="Password"
 className={classes.textField}
 name="password"
 readOnly={readOnly}
 onFocus={e => setReadOnly(false)}
  sx={{
        '& input': {
                     textSecurity: 'disc',
                     '-moz-text-security': 'disc',
                     '-webkit-text-security': 'disc',
                    },
      }}
  />

赞(0）回复(0）举报 2023-03-16

我来回答

javascript React材料Ui文本字段类型密码禁用自动填充从浏览器时，重点放在它

2条答案

相关问题

热门标签

最新问答