javascript - اكتشاف الإكمال التلقائي في إدخال النموذج باستخدام jQuery


4 Answers

يمكنك محاولة استخدام on input للكشف عن التغييرات المستندة إلى النص (باستثناء المفاتيح مثل ctrl و shift ) في <input> .

فمثلا:

$(input).on('input', function() { 
    console.log($(this).val()); 
});
Question

لدي نموذج يكتشف ما إذا كانت جميع حقول النص صالحة في كل لوحة مفاتيح () والتركيز () ؛ إذا كانت جميعها صالحة ، فستمكّن زر الإرسال للمستخدم من الضغط. ومع ذلك ، إذا كان المستخدم يملأ أحد مدخلات النص باستخدام ميزة الإكمال التلقائي للمتصفح ، فإنه يمنع تمكين الزر إرسال.

هل هناك طريقة للكشف عما إذا كان أي من المدخلات قد تغير بغض النظر عن كيفية تغييره ، وذلك باستخدام jQuery؟




كانت مشكلتي هي اكتشاف الملء التلقائي (عبر مكوّن إضافي مثل lastpass أو 1 كلمة مرور) بالإضافة إلى المشكلة الموضحة أعلاه.

الحل الذي نجحني كان:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

شاهد العرض في JSFiddle .




يمكنك استخدام .change() jQuery .change() .

بعد تحميل الصفحة مبدئيًا ، يمكنك التحقق من صحة النموذج بأكمله ، فقط للتحقق من أنه لم يتم ملؤه في الواقع. بعد ذلك يمكنك استخدام .change() للتحقق مما إذا كانت الأشياء قد تغيرت في النموذج ، وإذا تغير أي شيء ، التحقق من صحة النموذج مرة أخرى.

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

الخطة ب

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




كنت أرغب في الحصول على تجربة مستخدم جيدة جدًا في مجال لن تكون فيه غير صالحة (انتقل إلى اللون الأحمر في حالتي) طالما كان المستخدم نشطًا بشكل معقول ، على سبيل المثال لا يزال ملء الحقل.

للقيام بذلك من أجل الإدخال العادي ، تمكنت من ربط keyup بوظيفة debounce ، بينما تم توصيل blur للتحقق الفوري من الصحة. في حين يبدو أن يتم تشغيل keyup بواسطة lastpass ، لأنني قد debented ذلك ، كان هناك تأخير في التحقق من الصحة. بفضل @ peter-ajtai حاولت إضافة حدث change وهو بالفعل يمسك بتمريرة أخيرة ويترك المفاهيم الأخرى وحدها.

مثال على Coffeescript:

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

هذا العمل بشكل جيد وتطابق ملء نموذج بدء تشغيل التحقق الفوري.




Related