Material-ui: [حقل النص] لا يؤدي الملء التلقائي للنموذج إلى تحديث نص التسمية العائم في حقل النص

ربما يكون هذا مكانًا جيدًا للبدء ...

illogikal هل يمكن أن تنشر GIF ذلك؟

ها أنت ذا:

يشير التمييز باللون الأصفر إلى أنه تم ملء الحقول تلقائيًا. كما ترى ، تم ملء كلمة المرور ، لكن التسمية لا تزال في مكانها.

مم ، هذا مثير للاهتمام. mbrookes هل تعرف ما إذا كانت مخصصة لجميع أنواع الإدخال أم فقط لإدخال كلمة المرور؟

لست متأكدًا - لقد حاولت تبديل ترتيب العنوان وكلمة المرور ، ولكن لم يتم تشغيل الملء التلقائي ، إما لملء مستخدم / كلمة مرور معروفة ، أو لحفظ كلمة مرور جديدة. سآخذ لمعرفة أفضل السبل لاختبار المجالات الأخرى.

حسنًا ، أخطط لإعادة النظر في إعادة هيكلة بعض عناصر TextField في المستقبل القريب. سأحاول أن أجرب قليلا أيضا. اسمحوا لي أن أعرف إذا لاحظت أي شيء آخر.

مرحبا! نحن نواجه هذه المشكلة. هل هناك أي شيء يمكننا القيام به محليًا لمحاولة تجربة بعض الإصلاحات المحتملة لهذا؟ أم أنه سيتعين عليه الانتظار في إعادة البناء؟

لدينا المشكلة الدقيقة في حقل كلمة المرور المذكور أعلاه. بالإضافة إلى ذلك لدينا مشكلة مماثلة مع 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

إذا تم الضغط على أي مفتاح أو النقر بالماوس - فإنه يطفو بشكل صحيح ، لكن التحميل الأولي معطل.

نفس المشكلة بالضبط:

اي فكرة يا شباب؟

تعاني من نفس المشكلة.

هل هناك طريقة لتعطيل الملء التلقائي الذي يعمل مع MUI؟

@ kand617

ما عليك سوى إنشاء حقلين وإخفائهما باستخدام " display: none ". مثال:

ثم ضع حقلك الحقيقية تحتها.

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

أي حل لاطلاق حدث onChange؟

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

antoinerousseau هل سيتم دمج هذا في الماجستير؟

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

قد تكون هذه مشكلة مماثلة (نفس السبب الجذري ، مظهر مختلف؟)

لا أرى مشكلات الرسوم المتحركة على النحو المذكور ، لكن ارتفاع حاوية TextField لا يأخذ في الاعتبار الهامش العلوي للإدخال. ينتج عن هذا امتداد TextField بمقدار 14 بكسل أسفل الحاوية. إنه حل بديل مباشر إلى حد ما ، لكني لا أراه إلا مع الإكمال التلقائي:

سيتم إصلاح هذا في وقت قريب ؛)

nathanmarks لطيفة ، شكرا !!

وهل وجدت اختراقًا لتحديث التسمية العائمة عند الملء التلقائي للكروم دون النقر فوق الصفحة أيضًا؟

لا تزال هذه قضية مؤلمة للغاية.

حاولت استخدام حدث الملء التلقائي الفانيليا الذي لم ينجح.

أنا أستخدم redux-form (مثل كثيرين آخرين) وقد جئت بحل بديل قبيح (فقط لنموذج تسجيل الدخول الخاص بي ، لا أهتم بالنماذج الأخرى).
لقد اختبرت ذلك في الكروم فقط لذا استخدمه في الاعتبار.

عندما أضفت اسم مستخدم وكلمة مرور مخفيين ، تجاهل الكروم النموذج بأكمله (ما لم يخفهم مع العرض: لا شيء لم يهتم به الكروم).

لذلك استخدمت 4 (: خائب الأمل :) حقول إضافية. 2 لجعل الكروم يتجاهل النموذج الخاص بي (الإكمال التلقائي = إيقاف التشغيل لم يعمل) و 2 آخرين في نموذج مزيف مختلف لجعل الكروم يملأ ، مقارنةً بـ componentDidMount ، أضفت مهلة تنسخ القيم من الحقول المزيفة إلى الحقول الحقيقية باستخدام الإعادة - حدث تغيير النموذج:

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

إذا كنت تشير إلى معايير React والاتساق أكثر مما أوافق ، لكنني لا أعتقد أنها مشكلة كبيرة.

هذا هو الحل الخاص بي.

أولاً ، تحققت مما إذا كان اسم المستخدم مملوءًا تلقائيًا عند تحميل المكون.
إذا كانت الإجابة بنعم ، فسوف أقوم بتحديث حالة حقل كلمة المرور.
بمجرد تحول hasValue إلى true ، سيتم تحديث التسمية العائمة.

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

أتمنى أن يساعدك هذا. :)

لقد وجدت طريقة لتحديث التسمية العائمة عندما تم ملؤها تلقائيًا بواسطة المتصفح.
"

setTimeout (الوظيفة () {
var autofilled = document.querySelectorAll ('إدخال # كلمة المرور: -webkit-autofill') ؛
إذا (مملوءة تلقائيًا) {
$ ("input [type = password]"). parent (). addClass ("is-dirty")؛
}
} ، 500) ؛
"
يجب أن يكون هذا داخل المستند جاهزًا في النهاية.
class "is-dirty" هي الفئة التي تقوم بتشغيل التسمية العائمة الخاصة بك.

أنا أستخدم صيغة الإعادة مع تفاعل واجهة المستخدم. الحل بالنسبة لي هو وضع الإدخال المزيف بعد الإدخال المطلوب مباشرةً.

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

تم إطلاق المنفذ الخلفي للإصلاح في React 15.6.0 . أي شخص في وضع يمكنه من اختبار ما إذا كان يحل هذه المشكلة؟

[لمعلوماتك: سيتم حذف منشور "أنا أيضًا" أعلاه - يرجى استخدام أزرار التصويت بدلاً من تنشيط المناقشة.].

mbrookes لم يتم إصلاحه كما اختبرت.

Stupidism التفاصيل؟

تمامًا مثل الذي نشرته قبل عامين. 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

: man_shrugging: في هذه الحالة ، يبدو أن حل @ whtang906 هو الخيار الأفضل في الوقت الحالي.

لإعادة الشكل

  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-beta ، تم إصلاح المشكلة على طول الطريق. يمكن أن يكون إعادة كتابة أو ترقية رد الفعل. أنا أغلق حتى نسمع المزيد عنها. شكرا للمناقشة هنا!

لا يزال الخطأ موجودًا ...
[email protected]
رد @ 15.6.1
الكروم 60.0.3112.90

artalar فقط جرب الحل componentDidMount O (∩_∩) O

Stupidism شكرا لك على الحل! لقد جربت كل ما سبق ولم يعمل أي منهم. ربما لأن معظمهم تتراوح أعمارهم بين 1-2 سنوات ...
راجع للشغل ، هذا الخطأ يحدث فقط في Chrome ، Firefox جيد تمامًا :)

@ Ivan-Parushev أعتقد أنه بسبب تغيير استخدام المرجع. فهل تم حل مشكلتك أم لا؟

لم يتم حلها هنا ، فأنا أكمل القيم من localStorage إذا كانت موجودة في componentDidMount ، ونفس الخطأ مع جميع الإصدارات الأخيرة.

ما زلت في انتظار الإصلاح ...

أنا أقفل الخيط. هذه القضية عمرها سنتان. حيث أننا نركز الآن على فرع v1-beta. إذا كان لدى أي شخص مثال استنساخ ، فيرجى فتح إصدار جديد لفرع v1-beta.

لقد مرت 3 سنوات حتى الآن. لا تزال هذه المشكلة موجودة مع أحدث إصدارات التفاعل والمواد واجهة المستخدم.

tschaub هاها ، مثل مدخلات ios الثابتة التي تحصل على مشكلة مركزة.

tsmirnov حان الوقت لكي تتعثر

يوجد حل 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
}

هل تستطيع من فضلك ان تشرح ماذا يعني هذا ؟

يوجد حل css لهذا الخطأ

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

هل تستطيع من فضلك ان تشرح ماذا يعني هذا ؟

: -webkit- الملء التلقائي يحدد الحقول التي تم ملؤها تلقائيًا بواسطة المتصفح. ضع التسمية الخاصة بك بجوار الإدخال مباشرة وحددها باستخدام: -webkit-auto -ill selector. إذا كنت بحاجة إلى مزيد من المساعدة ، فيرجى مشاركة بنية html الحالية.

يوجد حل css لهذا الخطأ

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

هل تستطيع من فضلك ان تشرح ماذا يعني هذا ؟

: -webkit- الملء التلقائي يحدد الحقول التي تم ملؤها تلقائيًا بواسطة المتصفح. ضع التسمية الخاصة بك بجوار الإدخال مباشرة وحددها باستخدام: -webkit-auto -ill selector. إذا كنت بحاجة إلى مزيد من المساعدة ، فيرجى مشاركة بنية 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- الملء التلقائي يحدد الحقول التي تم ملؤها تلقائيًا بواسطة المتصفح. ضع التسمية الخاصة بك بجوار الإدخال مباشرة وحددها باستخدام: -webkit-auto -ill selector. إذا كنت بحاجة إلى مزيد من المساعدة ، فيرجى مشاركة بنية 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 مات ، Jim ، فربما تكون قد وصلت إلى المكان الصحيح بعد كل شيء!)

آه اللعنة! الخلط مع الأسماء. : يضحك: mbrookes سؤال واحد: هل يمكننا استخدام واجهة المستخدم المادية مباشرة في HTMLs مع روابط CDN؟ لم أدرك قط أن MDL قد مات: ابكي:

@ kishan3 يمكنك ، على الرغم من أنه كما هو موضح في المستندات ، فإن هذا يعني أن على العميل تنزيل المكتبة بأكملها ، على الأقل في المرة الأولى حتى يتم تخزينها مؤقتًا ، في حين أن بنائها محليًا يعني أنه يمكنك تحسين المكونات المضمنة.

ما هو الحل؟

تتعلق هذه المشكلة بـ v0.x.

oliviertassinari هذا

في حالتي ، أنا أستخدم قائمة منسدلة ، عندما يحدد المستخدم شيئًا ما في القائمة المنسدلة ، ثم يقوم بتعيين القيمة إلى الحالة ، ولا يقوم حقل النص المرتبط بالقيمة بتعويم التسمية.

تحرير : كما يبدو ، إذا قمت بتهيئة قيم TextField بـ null ، فلن يتحرك الطفو عند تمرير قيمة جديدة. تم الإصلاح من خلال تهيئة القيم في الحالة بسلسلة فارغة بدلاً من null

إذا كان أي شخص لا يزال هنا ، فقد قمت للتو بتعيين هذا العنصر InputLabelProps={{ shrink: true }} في TextField الذي أثر فيه هذا. كان الحل الأفضل لفريقنا.

@ Tom-con شكرًا يا رجل ، لقد نجحت معي تمامًا

هذه المشكلة مازالت قائمة في 2019 ...

إذا كان أي شخص لا يزال هنا ، فقد قمت للتو بتعيين هذا العنصر InputLabelProps={{ shrink: true }} في TextField الذي أثر فيه هذا. كان الحل الأفضل لفريقنا.
لقد كنت في حيرة من أمري وقمت بحل المشكلة! أفضل حل موصى به!

هذا إصدار 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 على متصفح Firefox؟

يرجى الاطلاع على # 14427 للإصدار 4.

أفضل حل هو التوقف عن استخدام Materialize واستخدام Bootstrap أو مكتبة أخرى ، مع ملاحظة أنه يجب عليك التوصل إلى حل بديل ويبدو أن 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 }}
              />

لقد قمت بحل مشكلتي في تثبيت Lodash.merge في مشروعي ثم أدركت أنني كنت أقوم بملء مكون حقل النص بشكل غير صحيح لأنني اعتقدت أن سلوك الإعادة يجب أن يكون هو نفسه عند استخدام الكائنات المتداخلة.

كما ترى ، لا أمتلئ بشكل صحيح عند مزج كائنين متداخلين.

لقد قمت بحل هذا باستخدام المكتبة وهكذا كان.

لاحظ أن أحدث إصدار من Material-UI (v4.9.0) يدعمه افتراضيًا.