javascript شرح تشغيل الإكمال التلقائي بدون إرسال نموذج




validation in javascript for registration form (8)

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

لقد حاولت تقديم الإدخالات autocomplete = "on" يدويًا ، ولكن بدون إرسال نموذج ، لا يتوفر للمتصفح أي طريقة لمعرفة الوقت الذي يجب فيه تخزين القيم ، لذلك لا يكون لذلك أي تأثير.

لقد جربت أيضًا التفاف المدخلات في نموذج يحتوي على onSubmit = "return false؛" ، لكن منع النموذج من الإرسال فعليًا يمنع أيضًا المستعرض من تخزين قيم المدخلات الخاصة به.

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


نحن نعلم أن المتصفح يحفظ معلوماته فقط عندما يتم إرسال النموذج ، مما يعني أنه لا يمكننا إلغاؤه باستخدام return false أو e.preventDefault()

ما يمكننا القيام به هو جعله يقدم البيانات إلى أي مكان دون إعادة تحميل صفحة. يمكننا فعل ذلك باستخدام iframe

<iframe name="💾" style="display:none" src="about:blank"></iframe>

<form target="💾" action="about:blank">
    <input name="user">
    <input name="password" type="password">
    <input value="Login" type="submit">
</form>

عرض تجريبي على JSfiddle (تم اختباره في IE9 وفايرفوكس و Chrome)

الايجابيات حول الإجابة المقبولة حاليا:

  • رمز أقصر
  • لا مسج
  • لم يتم تحميل أي صفحة من جانب الخادم ؛
  • لا javascript إضافية.
  • لا فئات إضافية ضرورية.

لا يوجد javascript إضافية. عادة ما تقوم بإرفاق معالج بحدث submit النموذج لإرسال XHR ولا تلغيه.

على سبيل المثال ، Javascript

// for modern browsers with window.fetch
document.forms[0].addEventListener('submit', function (event) {
    fetch('login.php', {
        method: 'post',
        body: new FormData(event.target))
    }).then(r => r.text()).then(() => { /* login completed */ })
    // no return false!!
});

لا يدعم جافا سكريبت

من الناحية المثالية ، يجب عليك السماح للنموذج بالعمل بدون جافا سكريبت أيضًا ، لذلك عليك إزالة target وتعيين الإجراء على صفحة ستتلقى بيانات النموذج.

<form action="login.php">

ثم أضفه ببساطة عبر جافا سكريبت عند إضافة حدث submit :

formElement.target = '💾';
formElement.action = 'about:blank';

يمكنك استخدام "." في كل من iframe src و form action.

 <iframe id="remember" name="remember" style="display:none;" src="."></iframe>
 <form target="remember" method="post" action=".">
    <input type="text" id="path" size='110'>
    <button type="submit" onclick="doyouthing();">your button</button>
</form>

لم أختبر هذا ، ولكن قد يعمل إذا أرسلت النموذج إلى iframe مخفي (بحيث يتم إرسال النموذج بالفعل ولكن لا تتم إعادة تحميل الصفحة الحالية).

<iframe name="my_iframe" src="about:blank"></iframe>

<form target="my_iframe" action="about:blank" method="get">...</form>

ربما يمكنك استخدام هذا Twitter Typeahead ... عبارة عن تنفيذ كامل تمامًا للإكمال التلقائي ، مع الجلب المسبق المحلي والبعيد ، وهذا يجعل استخدام التخزين المحلي للاحتفاظ بالنتائج وأيضاً إظهار تلميح في عنصر الإدخال ... الرمز هو سهلة الفهم ، وإذا كنت لا ترغب في استخدام البرنامج المساعد jquery الكامل ، أعتقد أنه يمكنك إلقاء نظرة على الرمز لمعرفة كيفية تحقيق ما تريد ...


يمكنك استخدام jQuery للاستمرار في بيانات الإكمال التلقائي في localstorage عندما يتم التركيز وعندما يتم التركيز على الإكمال التلقائي إلى القيمة الدائمة.

أي

$(function(){
 $('#txtElement').on('focusout',function(){
   $(this).data('fldName',$(this).val());
 }

 $('#txtElement').on('focusin',function(){
   $(this).val($(this).data('fldName'));
 }
}

يمكنك أيضًا ربط منطق الثبات على الأحداث الأخرى أيضًا وفقًا لمتطلبات التطبيق.


تأكد من إرسال النموذج عبر POST. إذا كنت ترسل عبر ajax ، فافعل <form autocomplete="on" method="post"> ، مع حذف سمة action .


من ما بحثت عنه .. يبدو أنك بحاجة إلى تحديد الأسماء. يتم حفظ بعض الأسماء القياسية مثل "الاسم" و "البريد الإلكتروني" و "الهاتف" و "العنوان" تلقائيًا في معظم المتصفحات.

حسنا ، المشكلة هي أن المتصفحات تتعامل مع هذه الأسماء بشكل مختلف. على سبيل المثال ، هنا هو regex chrome:

  • الاسم الأول: "الأول. * الاسم | الأحرف الأولى | fname | الأول $"
  • email: "e.؟mail"
  • العنوان (السطر 1): "العنوان. * الخط | address1 | addr1 | الشارع"
  • zipcode: "zip | postal | post. * code | pcode | ^ 1z $"

لكن يستخدم Chrome أيضًا x-autocompletetype ، بحيث يمكنك تخصيص الاسم ووضع نوع الإكمال التلقائي ، ولكن أعتقد أن هذا ليس للحقول المخصصة.

إليك تجربة chrome

وهو شيء آخر في IE و Opera و Mozilla. في الوقت الحالي ، يمكنك تجربة حل iframe هناك ، حتى تتمكن من إرساله. (ربما هو شيء شبه قياسي)

حسنا ، هذا كل ما استطيع المساعدة.


بالنسبة لأولئك الذين يفضلون عدم تغيير وظائفهم النموذجية الحالية ، يمكنك استخدام نموذج آخر لتلقي نسخ من جميع قيم النماذج ثم إرسالها إلى صفحة فارغة قبل أن يتم إرسال النموذج الرئيسي. هنا هو وثيقة HTML قابلة للاختبار بشكل كامل باستخدام JQuery Mobile مما يدل على الحل.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <form method="post">
        <input type="text" name="email" />
        <input type="submit" value="GO" onclick="save_autofill(this);" />
    </form>


    <script>
        function save_autofill(o) {
            $(':input[name]', $('#hidden_form')).val(function () {
                return $(':input[name=' + this.name + ']', $(o.form)).val();
            });

            $('#hidden_form').find("input[type=submit]").click();
        }
    </script>

    <iframe name="hidden_iframe" style="display:none"></iframe>
    <form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none">
        <input type="text" name="email" />
        <input type="submit" />
    </form>
</body>
</html>

يجب save_autofill الدالة save_autofill فقط على زر إرسال النموذج الرئيسي. إذا كان لديك وظيفة كتابية save_autofill النموذج ، save_autofill المكالمة بعد استدعاء save_autofill . يجب أن يكون لديك مربع نص مسمى في your hidden_form لكل نموذج في النموذج الرئيسي.

إذا كان موقعك يستخدم طبقة المقابس الآمنة ، فيجب عليك تغيير عنوان URL للبحث about:blank مع https://about:blank .





forms