كيف يمكنني منع Chrome من تحويل مربعات الإدخال الخاصة بموقعي إلى اللون الأصفر؟

Question

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

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

لذا، لمحاولة تجنب هذه المشكلة، هل هناك أي طريقة أبسط لمنع Chrome من إعادة تلوين مربعات الإدخال؟

[عدل] لقد جربت الاقتراح المهم أدناه ولم يكن له أي تأثير.لم أقم بعد بفحص شريط أدوات Google لمعرفة ما إذا كانت السمة !important ستعمل من أجل ذلك.

بقدر ما أستطيع أن أقول، لا توجد أي وسيلة أخرى غير استخدام سمة الإكمال التلقائي (والتي يبدو أنها تعمل).

Answer 1

وأنا أعلم في فايرفوكس يمكنك استخدام الإكمال التلقائي السمة = "إيقاف" لتعطيل وظيفة الإكمال التلقائي. إذا كان هذا يعمل في كروم (لم تختبر)، هل يمكن تعيين هذه السمة عند مواجهة أي خطأ.

ويمكن استخدام هذا لكل عنصر واحد

<input type="text" name="name" autocomplete="off">

... فضلا عن شكل كامل

<form autocomplete="off" ...>

Answer 2

وتعيين الخاصية مخطط CSS لا شيء.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

في الحالات التي يكون فيها المتصفح قد تضيف لون الخلفية وكذلك وهذا يمكن أن تكون ثابتة عن طريق شيء من هذا القبيل

:focus { background-color: #fff; }

Answer 3

وهذا هو بالضبط ما كنت تبحث عنه!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

Answer 4

وباستخدام قليلا من مسج يمكنك إزالة التصميم كروم مع الحفاظ على وظيفة الإكمال التلقائي سليمة. كتبت في ما بعد قصيرة حول هذا الموضوع هنا: http://www.benjaminmiles.com/2010 / 11/22 / تثبيت-جوجل-معدن الكروم الأصفر-الإكمال التلقائي-انماط مع مسج /

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
    $('input:-webkit-autofill').each(function(){
        var text = $(this).val();
        var name = $(this).attr('name');
        $(this).after(this.outerHTML).remove();
        $('input[name=' + name + ']').val(text);
    });
});}

Answer 5

لإزالة الحدود لكافة الحقول يمكنك استخدام ما يلي:

و*:focus { outline:none; }

لإزالة الحدود لتحديد حقول فقط تنطبق هذه الفئة لحقول الإدخال التي تريدها:

و.nohighlight:focus { outline:none; }

ويمكنك تغيير بالطبع الحدود كما تريدها أيضا:

و.changeborder:focus { outline:Blue Solid 4px; }

و(من بيل Beckelman: تجاوز الحدود التلقائي كروم حول الحقول النشطة عن طريق CSS )

Answer 6

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

Answer 7

وانها قطعة من الكعكة مع مسج:

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

وأو إذا كنت تريد أن يكون قليلا أكثر انتقائية، إضافة اسم فئة محدد.

Answer 8

الطريقة الأسهل في رأيي هي:

1. يحصل http://www.quirksmode.org/js/detect.html

2. استخدم هذا الرمز:

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };
   

Answer 9

وبعد تطبيقBenjamin حل له وجدت أن الضغط على الزر مرة أخرى لا تزال تعطيني تسليط الضوء الأصفر.

وبلدي حل <م> بطريقة أو بأخرى لمنع هذا تسليط الضوء الأصفر على العودة غير من خلال تطبيق جافا سكريبت مسج التالية:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

ونأمل أن يساعد أي شخص !!

Answer 10

وهذا يعمل. أفضل للجميع، يمكنك استخدام القيم رغبا (مربع الظل أقحم الإختراق لا يعمل مع رغبا). هذا هو قرص طفيف الجواب @ بنيامين. أنا أستخدم $ (الوثيقة) .ready () بدلا من $ (إطار) .load (). يبدو أن تعمل على نحو أفضل بالنسبة لي - الآن هناك أقل بكثير FOUC. لا أعتقد أن هناك وعيوب لاستخدام $ (الوثيقة) .ready ().

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(function() {
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
};

Answer 11

ولإصدارات اليوم، هذا وتعمل أيضا إذا وضعت في واحدة من المدخلات تسجيل الدخول اثنين. إصلاح أيضا الإصدار 40+ وأواخر قضية فايرفوكس.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

Answer 12

input:focus { outline:none; }

وهذا عمل عظيم بالنسبة لي ولكن أكثر من المرجح أن تبقى الأمور موحدة على موقعك الخاص بك تريد الذهاب الى ليشمل أيضا هذا في CSS للحصول على تيكستارياس:

textarea:focus { outline:none; }

وكما أنه قد يبدو واضحا لمعظم ولكن للمبتدئين ويمكنك أيضا تعيين للون على هذا النحو:

input:focus { outline:#HEXCOD SOLID 2px ; }

Answer 13

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