web-dev-qa-db-fra.com

material-ui TextField désactiver la saisie automatique du navigateur

J'utilise le matériel ui v0.20.0 et je dois interdire la sauvegarde du mot de passe pour un utilisateur avec TextField. J'ai ajouté des accessoires à TextField autocomplete = 'nope' car tous les navigateurs ne comprennent pas autocomplete = 'off'. Il semble que la dernière version de Chrome 63 ne l'accepte pas. Parfois, cela ne fonctionne pas et parfois cela fonctionne. Je ne comprends pas pourquoi cela fonctionne si fort. Quand chrome demande d'enregistrer le mot de passe et je l'enregistre, et après cela, je veux modifier l'entrée, j'ai toujours ceci: enter image description here

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

Il semble que cela fonctionne dans Firefox (v57.0.4)

Par défaut, TextField n'a pas autoComplete = 'off' enter image description here

htmlformsinputautocompletematerial-ui
8
Palaniichuk Dmytro

Pour désactiver la saisie automatique dans Material-ui TextField. ses travaux pour moi

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

devrait être autoComplete = 'off'

autoComplete='off'
6
D V Yogesh

Cela semble avoir fonctionné pour moi (nous utilisons du matériel ui avec une forme redux)

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

"new-password" fonctionne si l'entrée est type = "password" off "fonctionne si c'est un champ de texte normal enveloppé dans un formulaire

3
Ben Ahlander

Fixé. Il suffit d'ajouter un champ de saisie réel au-dessus

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 - support testé sur Edge, Chrome (dernière version 63), Firefox Quantum (57.0.4 64-бит), Firefox (52.2.0) les faux champs sont une solution de contournement pour chrome/opéra remplissage automatique obtenant les mauvais champs

 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'
      ... 
    />
1
Palaniichuk Dmytro

Avec l'entrée Material UI, vous pouvez utiliser

autoComplete = "nouveau-mot de passe"

Vous aurez donc quelque chose comme cette entrée:

<TextField
 autoComplete="new-password"
/>

Cela a été d'une grande aide par exemple pour éviter plus de styles du navigateur sur une page de connexion.

J'espère que cela aide les autres!

0
Ismael Terreno

Je l'ai rencontré récemment. J'ai essayé tout ce que j'ai trouvé sur le Web, mais finalement le correctif qui a fonctionné pour moi était de faire ce qui suit.

  1. NE définissez PAS le type = "mot de passe" sur le composant TextField

  2. À définir avec auto C omplete: 'new-password' sur les accessoires d'entrée comme ceci:

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

Cela a fonctionné pour moi:

Chaque fois que vous souhaitez désactiver une saisie automatique pour le champ de mot de passe (également le champ ci-dessus), mettez-le simplement dans votre entrée de mot de passe:

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

L'important est d'avoir le autoComplete='new-password'

0
Mateusgf

Vous n'avez plus besoin de fournir autoComplete = 'off' pour le composant AutoComplete sur la branche principale. Il est ajouté par défaut.

Vérifiez ce fil pour plus de détails.

0
Hemadri Dasari