Material-ui: [TextField] फॉर्म ऑटोफिल टेक्स्टफील्ड पर फ्लोटिंग लेबल टेक्स्ट को अपडेट नहीं करता है

यह शायद एक अच्छी जगह है ...

@illogikal क्या आप gif की पोस्ट कर सकते हैं?

हेयर यू गो:

पीला हाइलाइट इंगित करता है कि खेतों को स्वत: स्फूर्त किया गया है। जैसा कि आप देख सकते हैं, पासवर्ड भरा है, लेकिन लेबल अभी भी है।

मम, यह दिलचस्प है। @mbrookes क्या आप जानते हैं कि यह सभी इनपुट प्रकारों या केवल पासवर्ड इनपुट के लिए है?

निश्चित नहीं है - मैंने पते और पासवर्ड के क्रम को स्वैप करने की कोशिश की, लेकिन ऑटोफ़िल ने आग नहीं लगाई, या तो एक ज्ञात उपयोगकर्ता / पासवर्ड भरने के लिए, या एक नया बचाने के लिए। मुझे यह पता लगाना होगा कि अन्य क्षेत्रों का परीक्षण करना कितना अच्छा है।

ठीक है, मैं निकट भविष्य में कुछ TextField के सामान को फिर से भरने पर विचार कर रहा हूं। मैं भी थोड़ा प्रयोग करने की कोशिश करूँगा। मुझे पता है अगर तुम कुछ और नोटिस।

नमस्कार! हम इस मुद्दे पर चल रहे हैं। क्या इसके लिए w / कुछ संभावित सुधारों को आज़माने और प्रयोग करने के लिए हम कुछ भी कर सकते हैं? या फिर रिफ्लेक्टर पर इंतजार करना पड़ रहा है?

हमें ऊपर सूचीबद्ध पासवर्ड फ़ील्ड में सटीक समस्या है। इसके अलावा, हम एक सादे TextField साथ एक समान समस्या है। हमारे पास संकेत पाठ सेट है जो यदि आप मूल्यों को टाइप करते हैं तो चले जाते हैं। हालांकि, जब हम पृष्ठ रेंडर (गहरा लिंक) का मूल्य निर्धारित करते हैं तो संकेत पाठ वास्तविक मूल्य के पीछे दिखाई देता है। क्या यह एक ही मुद्दा है या यह कुछ अलग होगा?

क्या यह एक ही मुद्दा है या यह कुछ अलग होगा?

यह एक अलग मुद्दे की तरह दिखता है।

एक आकलन के लिए प्रेरणा: https://github.com/appsforartists/gravel/blob/master/src/components/Input.jsx#L208

कोड के लिए जोड़ा जा सकता है कि onChange अद्यतन करने के लिए एक state.isAutofilled

Chrome संस्करण 49.0.2623.87 (64-बिट) OS X El Capitan

यदि कोई कुंजी दबाया जाता है या माउस क्लिक किया जाता है - यह सही ढंग से तैरता है, लेकिन प्रारंभिक लोड टूट गया है।

सटीक एक ही समस्या:

कोई विचार, दोस्तों?

इसी मुद्दे का अनुभव।

क्या ऑटोफिल को निष्क्रिय करने का एक तरीका है जो एमयूआई के साथ काम करता है?

@ kand617

बस कुछ फ़ील्ड बनाएं और उन्हें " प्रदर्शन: कोई नहीं " के साथ

फिर अपने असली खेतों को नीचे रखें।

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

आग लगने की घटना का कोई समाधान?

@devdlabs https://github.com/callemall/material-ui/pull/3372/files

@antoinificseau क्या यह मास्टर में विलय होने वाला है?

@devdlabs https://github.com/callemall/material-ui/pull/3372#issuecomment -191523369

यह एक समान मुद्दा हो सकता है (समान मूल कारण, अलग अभिव्यक्ति?)

मैं उल्लेख किए गए एनीमेशन मुद्दों को नहीं देख रहा हूं, लेकिन टेक्स्टफिल्ड कंटेनर की ऊंचाई इनपुट पर शीर्ष मार्जिन को ध्यान में नहीं रखती है। यह TextField कंटेनर के नीचे 14px तक फैली हुई है। यह काफी सीधा काम है, लेकिन मैं इसे केवल स्वत: पूर्णता के साथ देख रहा हूं:

यह जल्द ही ठीक हो जाएगा;)

अच्छा @nathanmark , धन्यवाद !!

और क्या आपने एक फ्लोटिंग लेबल को अपडेट करने के लिए हैक किया था जब क्रोम ऑटोफिल्स को पेज पर क्लिक किए बिना भी?

यह अभी भी एक बहुत दर्दनाक मुद्दा है।

मैंने वेनिला-ऑटोफिल-इवेंट का उपयोग करने की कोशिश की, जो अभी काम नहीं आया।

मैं redux-form (कई अन्य लोगों की तरह) का उपयोग कर रहा हूं और मैं एक बदसूरत वर्कअराउंड के साथ आया (बस अपने लॉगिन फॉर्म के लिए, मुझे अन्य रूपों की परवाह नहीं है)।
मैंने इसे केवल क्रोम में परीक्षण किया है इसलिए इसे विचाराधीन उपयोग करें।

जब मैंने एक छिपा हुआ उपयोगकर्ता नाम और पासवर्ड फ़ील्ड जोड़ा तो क्रोम ने पूरे फॉर्म को अनदेखा कर दिया (जब तक कि उन्हें प्रदर्शन के साथ छिपाया नहीं गया: कोई भी क्रोम जिसके बारे में परवाह नहीं करता था)।

इसलिए मैंने 4 (: निराश:) अतिरिक्त क्षेत्रों का उपयोग किया। 2 क्रोम बनाने के लिए मेरे रूप को अनदेखा करें (स्वत: पूर्ण = बंद काम नहीं किया) और क्रोम भरने के लिए 2 और एक अलग नकली रूप में, जैसा कि घटकडाइमाउंट में मैंने एक टाइमआउट जोड़ा था जो नकली क्षेत्रों से मूल्यों को कॉपी करने के लिए असली वाले की नकल करता था -परिवर्तन परिवर्तन घटना:

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 प्रतिक्रिया का उपयोग करते हैं, तो यह autocomplete बदल जाएगा।
आप देख सकते हैं कि मैंने एक स्ट्रिंग मान ( "off" ) का उपयोग किया है, न कि js मूल्य ( {'off'} ) का।

यदि आप प्रतिक्रिया मानकों और निरंतरता की बात कर रहे हैं तो मैं सहमत हूं, लेकिन मुझे नहीं लगता कि यह एक बड़ी बात है।

यह मेरा समाधान है।

सबसे पहले, मैंने जाँच की कि क्या घटक माउंट होने पर उपयोगकर्ता नाम स्वत: पूर्ण है।
यदि हां, तो मैं पासवर्ड फ़ील्ड की स्थिति को अपडेट करूंगा।
एक बार hasValue सही हो जाने के बाद, फ्लोटिंग लेबल अपडेट हो जाएगा।

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

उम्मीद है की यह मदद करेगा। :)

मुझे फ्लोटिंग लेबल को अपडेट करने का एक तरीका मिला जब यह ब्राउज़र द्वारा भरा गया था।
`

setTimeout (फ़ंक्शन () {
var ऑटोफ़िल्ड = document.querySelectorAll ('इनपुट # पासवर्ड: -webkit-autofill');
अगर (स्वतः पूर्ण) {
।। $ ( "इनपुट [प्रकार = पासवर्ड]") माता-पिता () addClass ( "-गंदा है");
}
}, 500);
`
यह अंत में तैयार आपके दस्तावेज़ के अंदर होना चाहिए।
वर्ग "है-गंदा" वह वर्ग है जो आपके फ्लोटिंग लेबल को ट्रिगर करता है।

मैं अभिक्रिया-यूआई के साथ Redux-form का उपयोग कर रहा हूं। मेरे लिए समाधान आवश्यक इनपुट के ठीक बाद नकली इनपुट है।

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

उम्मीद है कि रिएक्ट 16 द्वारा तय किया जाना चाहिए: https://github.com/facebook/react/issues/7211#issuecomment -266774957

जब मुझे 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} />
    }
}

फिक्स का पिछला पोर्ट सिर्फ रिएक्ट 15.6.0 में जारी किया गया है। परीक्षण करने की स्थिति में कोई भी इस मुद्दे को हल करता है या नहीं?

[FYI करें: ऊपर "मुझे भी" पोस्ट हटा दी जाएगी - कृपया चर्चा के बजाय पल्स बटन का उपयोग करें।]

@mbrookes जैसा मैंने परीक्षण किया

@Stupidism विवरण?

ठीक उसी तरह जैसे आपने 2 साल पहले पोस्ट किया था। https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism मटेरियल-यूआई का कौन सा संस्करण, रिएक्ट का कौन सा संस्करण, क्या ब्राउज़र / संस्करण?

  "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

: man_shrugging: उस स्थिति में @ whtang906 का वर्कअराउंड अब के लिए सबसे अच्छा विकल्प लगता है।

Redux-form के लिए

  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)
  }

क्रोम ऑटोफ़िल्ड पासवर्ड फ़ील्ड से मान प्राप्त नहीं कर सकते
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

जहां तक ​​मैं v1-बीटा शाखा के साथ खेल रहा हूं, मुद्दे को रास्ते में तय किया गया है। यह फिर से लिखना या प्रतिक्रिया का उन्नयन हो सकता है। मैं तब तक बंद कर रहा हूं जब तक हम इसके बारे में अधिक नहीं सुनते। यहाँ चर्चा के लिए धन्यवाद!

त्रुटि अभी भी मौजूद है ...
[email protected]
[email protected]
क्रोम 60.0.3112.90

@artalar बस componentDidMount समाधान O (∩_ O) O का प्रयास करें

@Stupidism समाधान के लिए धन्यवाद! मैंने उपरोक्त सभी की कोशिश की है और उनमें से कोई भी काम नहीं किया है। शायद इसलिए कि उनमें से ज्यादातर 1-2 साल पुराने हैं ...
Btw, यह बग केवल क्रोम में होता है, फ़ायरफ़ॉक्स पूरी तरह से ठीक है :)

@ इवान-परुशेव मुझे लगता है कि यह है क्योंकि रेफ के उपयोग को बदल दिया गया है। तो आपकी समस्या हल हुई या नहीं?

यहाँ हल नहीं किया गया है, Im स्थानीयस्टोरेज से मानों को भरता है यदि वे कंपोनेंटडिमाउंट पर मौजूद हैं, और सभी नवीनतम संस्करणों के साथ एक ही त्रुटि है।

अभी भी तय होने का इंतजार है ...

मैं धागे को बंद कर रहा हूं। यह मुद्दा 2 साल पुराना है। जैसा कि हम अब v1-बीटा शाखा पर ध्यान केंद्रित कर रहे हैं। यदि किसी के पास प्रजनन उदाहरण है, तो कृपया v1-बीटा शाखा के लिए एक नया मुद्दा खोलें।

अब 3 साल हो गए हैं। यह समस्या अभी भी नवीनतम प्रतिक्रिया और सामग्री यूआई संस्करणों के साथ मौजूद है।

@tschaub Haha, ios पोजिशन-फिक्स्ड इनपुट की तरह केंद्रित समस्या हो जाती है।

@tsmirnov समय आपके लिए अटक गया है और इसे ठीक करने के लिए। 😜

इस बग का एक सीएसएस समाधान है

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

हेयर यू गो:

पीला हाइलाइट इंगित करता है कि खेतों को स्वत: स्फूर्त किया गया है। जैसा कि आप देख सकते हैं, पासवर्ड भरा है, लेकिन लेबल अभी भी है।

मैं उसी मुद्दे का सामना कर रहा हूं।

इस बग का एक सीएसएस समाधान है

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

क्या आप इसका मतलब बता सकते हैं?

इस बग का एक सीएसएस समाधान है

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

क्या आप इसका मतलब बता सकते हैं?

: -webkit-autofill ब्राउज़र द्वारा स्वतःभरण फ़ील्ड का चयन करता है। इनपुट के बगल में अपना लेबल रखें और इसे चुनें: -webkit-autofill चयनकर्ता। यदि आपको अधिक सहायता की आवश्यकता है तो कृपया अपनी वर्तमान html संरचना साझा करें।

इस बग का एक सीएसएस समाधान है

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

इस बग का एक सीएसएस समाधान है

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

उह, @ किशन 3 मुझे लगता है कि आप खो गए हैं। MDL इस प्रकार है -> https://github.com/google/material-design-lite/issues/4827 -

(हालांकि यह देखते हुए कि एमडीएल जिम मर चुका है, शायद आप सब के बाद सही जगह पर आए हैं!)

आह! नामों के साथ इसकी उलझन। : हँसना: @mbrookes एक प्रश्न: क्या हम CDN लिंक के साथ HTML में सीधे सामग्री UI का उपयोग कर सकते हैं? मुझे कभी नहीं लगा कि एमडीएल मर चुका है: रोना:

@ kishan3 आप कर सकते हैं , हालांकि जैसा कि डॉक्स में कहा गया है, इसका मतलब है कि क्लाइंट को पूरी लाइब्रेरी डाउनलोड करनी होगी, कम से कम पहली बार जब तक यह कैश नहीं होगा, जबकि इसे स्थानीय रूप से बनाने का मतलब है कि आप अनुकूलित कर सकते हैं कि कौन से घटक शामिल हैं।

इसका क्या उपाय है?

यह समस्या v0.x को चिंतित करती है।

@oliviertassinari यह स्टिल

मेरे मामले में, मैं एक ड्रॉपडाउन का उपयोग कर रहा हूं, जब उपयोगकर्ता ड्रॉपडाउन में कुछ का चयन करता है तो यह राज्य के लिए मूल्य निर्धारित करता है, मूल्य से संबंधित टेक्स्टफीड लेबल को फ्लोट नहीं करता है।

संपादित करें : जैसा कि ऐसा लगता है, अगर मैं null साथ TextField मानों को अंकित करता हूं, तो नया मान पारित होने पर नाव नहीं चलेगी। null बजाय खाली स्ट्रिंग के साथ राज्य में मूल्यों को इनिशियलाइज़ करके फिक्स्ड

अगर कोई अभी भी यहाँ है, तो मैंने इस प्रोप को InputLabelProps={{ shrink: true }} TextField पर सेट किया है जो इस पर प्रभाव

@ टॉम-कॉन धन्यवाद आदमी, यह मेरे लिए पूरी तरह से काम किया

यह समस्या अभी भी 2019 में मौजूद है ...

अगर कोई अभी भी यहाँ है, तो मैंने इस प्रोप को InputLabelProps={{ shrink: true }} TextField पर सेट किया है जो इस पर प्रभाव
मैं वास्तव में उलझन में था और आपने समस्या हल कर दी! सबसे अच्छा अनुशंसित समाधान!

यह एक v0.x समस्या (2015) है, कृपया # 14427 देखें।

इस बग का एक सीएसएस समाधान है

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

@ozturkcangokkaya हाय यह css समाधान क्रोम में ठीक काम करता है। लेकिन जब मैं फायरफॉक्स में अपना फॉर्म चेक करता हूं, तो फ्लोटिंग लेबल काम नहीं कर रहा है। क्या आपके पास कोई विचार है कि वेबकिट-ऑटोफिल फ़ायरफ़ॉक्स को क्यों प्रभावित करता है?

कृपया v4 के लिए # 14427 देखें।

सबसे अच्छा समाधान यह है कि आप भौतिकता का उपयोग करना बंद कर दें और बूटस्ट्रैप या किसी अन्य लाइब्रेरी का उपयोग करें, यह देखते हुए कि आपको वर्कअराउंड के साथ आना है और Google को समस्या को ठीक करने में कोई रुचि नहीं है।

अगर कोई अभी भी यहाँ है, तो मैंने इस प्रोप को InputLabelProps={{ shrink: true }} TextField पर सेट किया है जो इस पर प्रभाव

धन्यवाद, मैं इसका उपयोग कर रहा हूं: 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 }}
              />

मैंने अपनी प्रॉब्लम को अपने प्रोजेक्ट पर दर्ज करना शुरू कर दिया। फिर मैंने महसूस किया कि मैं टेक्स्ट फील्ड कंपोनेंट को गलत तरीके से भर रहा था, क्योंकि मुझे लगा कि जब मैं नेस्टेड ऑब्जेक्ट्स का उपयोग करता हूं तो रिड्यूक्स बिहेवियर एक जैसा होना चाहिए।

जैसा कि आप देख सकते हैं, जब मैं दो नेस्टेड वस्तुओं को मिलाकर सही ढंग से नहीं भर रहा हूं।

मैंने पुस्तकालय का उपयोग करके इसे हल किया और इसलिए यह था।

ध्यान दें कि सामग्री-UI का नवीनतम संस्करण (v4.9.0) डिफ़ॉल्ट रूप से इसका समर्थन करता है।