web-dev-qa-db-ja.com

material-ui TextFieldはブラウザのオートコンプリートを無効にします

私はマテリアルui v0.20.0を使用しており、TextFieldを使用してユーザーのパスワードを保存することを禁止する必要があります。 TextFieldに小道具を追加したautocomplete = 'nope'原因は、すべてのブラウザーがautocomplete = 'off'を理解できないためです。 Chrome 63の最後のバージョンはそれを受け入れません。それが機能しないこともあれば、機能することもあります。なぜそんなに動作するのかわからないのです。chromeはパスワードの保存を要求し、それを保存します。その後、入力を編集したいのですが、これはまだあります： 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'
   />

Firefox（v57.0.4）で動作するようです

デフォルトでは、TextFieldにはautoComplete = 'off'がありません enter image description here

htmlformsinputautocompletematerial-ui
14
Palaniichuk Dmytro

Material-ui TextFieldでオートコンプリートを無効にします。私のための作品

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

autoComplete = 'off'である必要があります

autoComplete='off'
11
D V Yogesh

これは私のために働いたようです（私たちはredux形式の素材UIを使用しています）

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

"new-password"は、入力がtype = "password" off "の場合に機能し、フォームにラップされた通常のテキストフィールドの場合に機能します。

7
Ben Ahlander

マテリアルUI入力で使用できる

autoComplete = "new-password"

したがって、次のような入力が得られます。

<TextField
 autoComplete="new-password"
/>

これは、たとえば、ログインページでブラウザからのスタイルが増えるのを防ぐための大きな助けでした。

これが他の人に役立つことを願っています！

5
Ismael Terreno

これは私のために働きました：

パスワードフィールド（上記のフィールドも同様）の自動入力を無効にする場合は、パスワード入力に次のように入力します。

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

重要なことは、autoComplete='new-password'

1
Mateusgf

修繕。実際の入力フィールドの上に追加するだけです

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.464-бит）、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'
      ... 
    />
1
Palaniichuk Dmytro

マスターブランチのAutoCompleteコンポーネントにautoComplete = 'off'を指定する必要はなくなりました。デフォルトで追加されます。

詳細は this thread を確認してください。

1
Hemadri Dasari

最近これに遭遇しました。私はWebで見つけたものをすべて試しましたが、最終的に私のために働いた修正は次のことをすることでした。

  1. TextFieldコンポーネントにtype = "password"を設定しないでください

  2. 自動と一緒に設定してください[〜＃〜] c [〜＃〜] omplete： 'new-password' on the input props this this：

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

NoValidateプロパティを使用して、フォームタグ内でテキストフィールドを囲みます。例えば：

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

AutoCompleteプロップが機能しない理由はわかりません。しかし、上記は機能します。

0
Thanmai C