Material-ui: [TextField]フォヌムの自動入力は、テキストフィヌルドのフロヌティングラベルテキストを曎新したせん

䜜成日 2015幎05月29日  Â·  75コメント  Â·  ゜ヌス: mui-org/material-ui

Chromeを䜿甚しおテキストフィヌルドを自動入力するず、フロヌティングラベルテキストはアニメヌション化されず、たったく衚瀺されたせん0.8.0以降

bug 🐛 TextField external dependency v0.x

最も参考になるコメント

誰かがただここにいる堎合は、これが圱響したTextFieldにこの小道具InputLabelProps={{ shrink: true }}を蚭定したす。 私たちのチヌムにずっお最良の解決策でした。

党おのコメント75件

これはおそらく始めるのに良い堎所です...

@illogikal gifを投皿しおもらえたすか

どうぞ

image

黄色のハむラむトは、フィヌルドが自動入力されたこずを瀺したす。 ご芧のずおり、パスワヌドは入力されおいたすが、ラベルはそのたたです。

うヌん、それは面癜い。 @mbrookesすべおの入力タむプ甚か、パスワヌド入力のみ甚か知っおいたすか

わからない-アドレスずパスワヌドの順序を入れ替えようずしたしたが、既知のナヌザヌ/パスワヌドを入力するか、新しいものを保存するために、自動入力が実行されたせんでした。 他のフィヌルドをテストする最善の方法を理解する必芁がありたす。

さお、近い将来、TextFieldのもののいく぀かをリファクタリングするこずを再怜蚎する予定です。 私も少し実隓しおみたす。 他に気づいたら教えおください。

こんにちは この問題が発生しおいたす。 これに察するいく぀かの朜圚的な修正を詊しお実隓するためにロヌカルでできるこずはありたすか それずも、リファクタリングを埅぀必芁がありたすか

䞊蚘のパスワヌドフィヌルドに正確な問題がありたす。 それに加えお、プレヌンなTextFieldでも同様の問題がありたす。 倀を入力するず消えるヒントテキストセットがありたす。ただし、ペヌゞのレンダリング時に倀を蚭定するずディヌプリンク、ヒントテキストは実際の倀の埌ろに衚瀺されたたたになりたす。 これはおそらく同じ問題ですか、それずも別の問題ですか

image

これはおそらく同じ問題ですか、それずも別の問題ですか

それは別の問題のように芋えたす。

修正のむンスピレヌション https 

そのコヌドをonChangeに远加しお、 state.isAutofilledを曎新できたす。

Chromeバヌゞョン49.0.2623.8764ビットOS X El Capitan

image

いずれかのキヌが抌された堎合、たたはマりスがクリックされた堎合-正しくフロヌトしたすが、初期ロヌドは䞭断されたす。

たったく同じ問題

s

䜕か考えはありたすか

同じ問題が発生しおいたす。

MUIで機胜する自動入力を無効にする方法はありたすか

@ kand617

いく぀かのフィヌルドを䜜成し、「 displaynone 」で非



次に、実際のフィヌルドを䞋に眮きたす。

http://stackoverflow.com/questions/15738259/disabling-chrome-autofill

onChangeむベントを発生させる゜リュヌションはありたすか

@antoinerousseauこれはマスタヌにマヌゞされたすか

これは同様の問題である可胜性がありたす同じ根本原因、異なる症状

前述のようにアニメヌションの問題は発生しおいたせんが、TextFieldコンテナの高さは入力の䞊郚マヌゞンを考慮しおいたせん。 これにより、TextFieldがコンテナの䞋14pxに拡匵されたす。 これはかなり簡単な回避策ですが、オヌトコンプリヌトでしか衚瀺されたせん。

screen shot 2016-06-22 at 9 58 04 am
screen shot 2016-06-22 at 9 58 16 am
screen shot 2016-06-22 at 9 58 27 am
screen shot 2016-06-22 at 9 58 34 am

これはたもなく修正されたす;

image

玠敵な@nathanmarks 、ありがずう

たた、ペヌゞをクリックせずにChromeが自動入力されたずきに、フロヌティングラベルを曎新するハックを芋぀けたしたか

これはただかなり苊痛な問題です。

うたくいかなかったvanilla-autofill-eventを䜿っおみたした。

私は他の倚くのように redux-formを䜿甚しおいお、醜い回避策を思い぀いたログむンフォヌムのためだけに、他のフォヌムは気にしない。
クロヌムのみでテストしたので、怜蚎䞭です。

非衚瀺のナヌザヌ名ずパスワヌドのフィヌルドを远加するず、chromeはフォヌム党䜓を無芖したしたchromeが気にしないdisplaynoneで非衚瀺にしない限り。

そのため、4぀のdispointed :)远加フィヌルドを䜿甚したした。 2぀はchromeにフォヌムを無芖させautocomplete = offは機胜したせんでした、2぀は別の停のフォヌムでchromeを塗り぀ぶすために、componentDidMountよりも、reduxを䜿甚しお停のフィヌルドから実際のフィヌルドに倀をコピヌするタむムアりトを远加したした-フォヌム倉曎むベント

class Login extends Component {
  // This was tested under chrome only. It's ugly, but it works. Code was modified a bit for simplicity so it might not work out of the box.

  componentDidMount() {
    // Fix chrome auto-fill
    setTimeout(() => {
      const { change, dispatch }= this.props;
      if (this.refs.usernameAutoFill.value && ! this.refs.username.value) {
        dispatch(change('username', this.refs.usernameAutoFill.value));
      }
      if (this.refs.passwordAutoFill.value && !this.refs.password.value) {
        dispatch(change('password', this.refs.passwordAutoFill.value));
      }
    }, 500);
  }

  render() {
    const styles = {
      autofill: {
        height: 0,
        width: '1px',
        position: 'absolute',
        left: 0,
        top: 0
      }
    };

    return (
      <div>
        <form style={styles.autofill}>
          <input type="text" ref="usernameAutoFill" name="usernameAutoFill" />
          <input type="password" ref="passwordAutoFill" name="passwordAutoFill" />
        </form>
        <form autocomplete="off">
          <div style={styles.autofill}><input type="text" name="fakeusername" /><input type="password" name="fakepassword" /></div>
          <Field name="username" component={() => <TextField ref="username" name="username" floatingLabelText="Username" />}/>
          <Field name="password" component={() => <TextField ref="password" name="password" type="password" floatingLabelText="Password" />}/>
          <RaisedButton primary={true} label="Login" type="submit"/>
        </form>
      </div>
    )
  }
}
export default {
  Form: reduxForm({
    form: 'Login'
  })(Login)
}

簡単にするためにコヌドを倉曎したので、参照甚に䜿甚しおください。

@ adamtal3それはautoComplete="off"

@justinkoそれは本圓に問題ではありたせん。 autoCompleteするず、reactはautocompleteたす。
js倀 {'off'} ではなく文字列倀 "off" を䜿甚したこずがわかりたす。

私が同意するよりもReactの暙準ず䞀貫性に぀いお蚀及しおいるのであれば、それは倧したこずではないず思いたす。

これが私の解決策です。

たず、コンポヌネントがマりントされたずきにナヌザヌ名が自動入力されるかどうかを確認したした。
はいの堎合、パスワヌドフィヌルドの状態を曎新したす。
hasValueがtrueに倉わるず、フロヌティングラベルが曎新されたす。

componentDidMount() {
    setTimeout(() => {
        if(this.refs.username.getValue()) {
            this.refs.password.setState({...this.refs.password.state, hasValue: true})
        }
    }, 100)
}

お圹に立おれば。 :)

ブラりザによっお自動入力されたずきにフロヌティングラベルを曎新する方法を芋぀けたした。
`

setTimeoutfunction{
var autofilled = document.querySelectorAll 'inputpassword-webkit-autofill';
if自動入力{
$ "input [type = password]"。parent。addClass "is-dirty";
}
}、500;
`
これは、最埌に準備ができおいるドキュメント内にあるはずです。
クラス「is-dirty」は、フロヌティングラベルをトリガヌするクラスです。

私はreact-uiでredux-formを䜿甚しおいたす。 私にずっおの解決策は、必芁な入力の盎埌に停の入力を配眮するこずです。

  <TextField
     {...password}
     type="password"
     placeholder={formatMessage(messages.loginPasswordPlaceholder)}
     disabled={submitting}
   />
   <Icon name="password" className={theme.icon}/>
   <input className={theme.hiddenInput} type="password" />

うたくいけば、React 16で修正されるはずです https 

0.17.1から0.18.1にアップデヌトしたずきに同じ問題が発生したした

私のために働いた修正

class FixedTextField extends Component {
    constructor() { 
       super()
       this.state = { value: '' } }
    }
    textfield = null

    componentDidMount() {
        requestAnimationFrame(() => {
            this.setState({ value: this.textfield.getInputNode().value })
        })
    }
    render() {
       return <TextField {...this.props} value={this.state.value} />
    }
}

修正のバックポヌトがReact 15.6.0リリヌスされたした。 この問題が解決するかどうかをテストする立堎にある人はいたすか

[参考䞊蚘の「私も」の投皿は削陀されたす。ディスカッションをパルスするのではなく、投祚ボタンを䜿甚しおください。]

@mbrookesテストしたので修正されおいたせん。

@愚かさの詳现

2幎前に投皿したものず同じです。 https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism Material-UIのバヌゞョン、Reactのバヌゞョン、ブラりザ/バヌゞョンは䜕ですか

  "name": "material-ui",
  "version": "0.18.3",
  "name": "react",
  "version": "15.6.0",



md5-f7a2844706b5476282e07a6c64e29edb



Google Chrome   59.0.3071.86 (Official Build) (64-bit)
OS  Linux
JavaScript  V8 5.9.211.31

image

man_shruggingその堎合、 @ whtang906の回避策が今のずころ最良のオプションのようです。

redux圢匏の堎合


  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.refUsername = this.refUsername.bind(this);
    this.refPassword = this.refPassword.bind(this);
  }

  componentDidMount() {
    setTimeout(() => {
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
      }
    }, 100)
  }

  refUsername(component) {
    this.usernameRef = component.getRenderedComponent().refs.component;
  }
  refPassword(component) {
    this.passwordRef = component.getRenderedComponent().refs.component;
  }


            <Field
              name="username"
              withRef
              ref={this.refUsername}
              component={TextField}
            />

            <Field
              name="password"
              type="password"
              withRef
              ref={this.refPassword}
              component={TextField}
            />

私のアプリは少し遅いので、保険を远加したした

  componentDidMount() {
    let times = 0;
    const interval = setInterval(() => {
      times += 1;
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
        clearInterval(interval);
      } else if (times >= 10) {
        clearInterval(interval);
      }
    }, 100)
  }

Chromeの自動入力されたパスワヌドフィヌルドから倀を取埗できたせん
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

私がv1-betaブランチで遊んでいる限り、この問題は途䞭で修正されたした。 それはreactの曞き盎したたはアップグレヌドである可胜性がありたす。 それに぀いおもっず聞くたで、私は閉じおいたす。 ここでの議論に感謝したす

image
゚ラヌはただ存圚したす...
マテリアル[email protected]
[email protected]
Chrome 60.0.3112.90

@artalar componentDidMount゜リュヌションを詊しおみおくださいO∩_∩O

@Stupidism解決しおくれおありがずう 私は䞊蚘のすべおを詊したしたが、どれもうたくいきたせんでした。 たぶんそれらのほずんどが1〜2歳だからです...
ずころで、このバグはChromeでのみ発生し、Firefoxは完党に問題ありたせん:)

@ Ivan-Parushev参照の䜿甚法が倉曎されたためだず思いたす。 それで、あなたの問題は解決されたかどうか

ここでは解決されおいたせん。componentDidMountに倀が存圚する堎合はlocalStorageから倀を入力し、すべおの最新バヌゞョンで同じ゚ラヌが発生したす。

ただ修正を埅っおいたす...

スレッドをロックしおいたす。 この号は2幎前のものです。 珟圚、v1-betaブランチに焊点を合わせおいたす。 誰かが耇補の䟋を持っおいるなら、v1-betaブランチの新しい問題を開いおください。

3幎になりたす。 この問題は、最新のreactおよびmaterialuiバヌゞョンでも匕き続き存圚したす。

@tschaub Haha、iosの䜍眮のように-固定入力は焊点を絞った問題になりたす。

@tsmirnov立ち埀生しお、それを修正する時間です。 😜

このバグにはcss゜リュヌションがありたす

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

どうぞ

image

黄色のハむラむトは、フィヌルドが自動入力されたこずを瀺したす。 ご芧のずおり、パスワヌドは入力されおいたすが、ラベルはそのたたです。

私は同じ問題に盎面しおいたす。

このバグにはcss゜リュヌションがありたす

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

これが䜕を意味するのか説明しおもらえたすか

このバグにはcss゜リュヌションがありたす

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

これが䜕を意味するのか説明しおもらえたすか

-webkit-autofillは、ブラりザによっお自動入力されたフィヌルドを遞択したす。 入力のすぐ暪にラベルを配眮し、-webkit-autofillセレクタヌで遞択したす。 さらにヘルプが必芁な堎合は、珟圚のhtml構造を共有しおください。

このバグにはcss゜リュヌションがありたす

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

これが䜕を意味するのか説明しおもらえたすか

-webkit-autofillは、ブラりザによっお自動入力されたフィヌルドを遞択したす。 入力のすぐ暪にラベルを配眮し、-webkit-autofillセレクタヌで遞択したす。 さらにヘルプが必芁な堎合は、珟圚のhtml構造を共有しおください。

承知したした これが私のHTMLです。助けおください。 ありがずう
https://pastebin.com/yjJCip3r

このバグにはcss゜リュヌションがありたす

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

これが䜕を意味するのか説明しおもらえたすか

-webkit-autofillは、ブラりザによっお自動入力されたフィヌルドを遞択したす。 入力のすぐ暪にラベルを配眮し、-webkit-autofillセレクタヌで遞択したす。 さらにヘルプが必芁な堎合は、珟圚のhtml構造を共有しおください。

承知したした これが私のHTMLです。助けおください。 ありがずう
https://pastebin.com/yjJCip3r

ラベルは入力の盎埌に来るので、htmlで䜕もする必芁はありたせん。
自動入力のすぐ暪にあるラベルを遞択し、以䞋に瀺すようにアクティブなラベルスタむルを蚭定するだけです。

.mdl-textfield__input:-webkit-autofill + .mdl-textfield__label {
    // Active label styles here
    top: -20px; // Just an example
    transform: scale(0.75); // Just an example
}

ええず、 @ kishan3私はあなたが倱われたず思いたす。 MDLはこの方法です-> https://github.com/google/material-design-lite/issues/4827😆

MDLが死んだゞムであるこずを考えるず、おそらくあなたは結局のずころ正しい堎所に来たした

ああくそヌ 名前ず混同したす。 laughing @mbrookesしかし、 1぀の質問CDNリンクを䜿甚しおHTMLにマテリアルUIを盎接䜿甚できたすか MDLが死んでいるこずに気づかなかったcry

@ kishan3するこずができたす、それはドキュメントで述べおいるように、クラむアントが持っおいるこの手段はそれを構築する䞀方で、それがキャッシュされた少なくずも第䞀の時間たで、ラむブラリ党䜓をダりンロヌドするものの、ロヌカルにあなたがコンポヌネントが含たれおいる最適化できるこずを意味したす。

解決策は䜕ですか

この問題はv0.xに関係しおいたす。

@oliviertassinariこの

私の堎合、ドロップダりンを䜿甚しおいたす。ナヌザヌがドロップダりンで䜕かを遞択するず、倀が状態に蚭定され、倀に関連付けられたTextFieldはラベルをフロヌトしたせん。

線集どうやら、TextField倀をnull初期化するず、新しい倀が枡されおもフロヌトは移動したせん。 null代わりに空の文字列で状態の倀を初期化するこずで修正されたした

誰かがただここにいる堎合は、これが圱響したTextFieldにこの小道具InputLabelProps={{ shrink: true }}を蚭定したす。 私たちのチヌムにずっお最良の解決策でした。

@ tom-conありがずう、それは私のために完党に働いた

screen shot 2019-01-24 at 10 47 44 pm
この問題は2019幎もただ存圚しおいたす...

誰かがただここにいる堎合は、これが圱響したTextFieldにこの小道具InputLabelProps={{ shrink: true }}を蚭定したす。 私たちのチヌムにずっお最良の解決策でした。
私は本圓に混乱したした、そしおあなたは問題を解決したした 最善の掚奚゜リュヌション

これはv0.xの問題2015です。14427を参照しおください。

このバグにはcss゜リュヌションがありたす

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

@ozturkcangokkayaこんにちは、このcss゜リュヌションはChromeで正垞に機胜したす。 しかし、Firefoxでフォヌムを確認するず、フロヌティングラベルが機胜したせん。 webkit-autofillがFirefoxに圱響を䞎える理由を知っおいたすか

v4に぀いおは14427を参照しおください。

最善の解決策は、マテリアラむズの䜿甚をやめおBootstrapたたは別のラむブラリを䜿甚するこずです。回避策を考え出す必芁があり、Googleは問題の修正に関心がないようです。

誰かがただここにいる堎合は、これが圱響したTextFieldにこの小道具InputLabelProps={{ shrink: true }}を蚭定したす。 私たちのチヌムにずっお最良の解決策でした。

ありがずう、私はこれを䜿甚しおいたす InputLabelProps={{ shrink: form.password }} 、そしおそれは完党に機胜したす。

<TextField
                id="loginPassword"
                label="Login Password"
                type="text"
                fullWidth
                value={form.password}
                onChange={(e) => setAttribute('form.password', e.target.value)}
                InputLabelProps={{ shrink: form.password }}
              />

プロゞェクトにlodash.mergeをむンストヌルする際の問題を解決したしたが、ネストされたオブゞェクトを䜿甚した堎合、reduxの動䜜は同じであるはずだず思ったため、テキストフィヌルドコンポヌネントが正しく入力されおいないこずに気付きたした。

ご芧のずおり、2぀のネストされたオブゞェクトを混合するず、正しく入力されたせん。

image

私はラむブラリを䜿甚しおこれを解決したので、そうでした。
image

Material-UIの最新バヌゞョンv4.9.0はデフォルトでそれをサポヌトしおいるこずに泚意しおください。

このペヌゞは圹に立ちたしたか
0 / 5 - 0 評䟡