Google Chrome tự động điền biểu mẫu và nền màu vàng của nó

Tôi gặp sự cố thiết kế với Google Chrome và chức năng tự động điền biểu mẫu của nó. Nếu Chrome nhớ một số thông tin đăng nhập / mật khẩu, nó sẽ thay đổi màu nền thành màu vàng.

Dưới đây là một số ảnh chụp màn hình:

Làm thế nào để loại bỏ nền đó hoặc chỉ vô hiệu hóa tự động điền này?

Thay đổi "màu trắng" thành bất kỳ màu nào bạn muốn.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

Nếu các bạn muốn các trường đầu vào minh bạch, bạn có thể sử dụng độ trễ chuyển tiếp và chuyển tiếp.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Giải pháp tại đây :

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

Trong Firefox, bạn có thể vô hiệu hóa tất cả tự động hoàn thành trên một biểu mẫu bằng cách sử dụng thuộc tính autocomplete = "off / on". Tương tự, các mục riêng lẻ tự động hoàn thành có thể được đặt bằng cùng một thuộc tính.

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

Bạn có thể kiểm tra điều này trong Chrome vì nó sẽ hoạt động.

Nếu bạn muốn duy trì tính năng tự động điền, cũng như mọi dữ liệu, trình xử lý đính kèm và chức năng được đính kèm với các yếu tố đầu vào của bạn, hãy thử tập lệnh này:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

Nó thăm dò cho đến khi tìm thấy bất kỳ yếu tố tự động điền nào, sao chép chúng bao gồm dữ liệu và sự kiện, sau đó chèn chúng vào DOM ở cùng một vị trí và xóa bản gốc. Nó dừng bỏ phiếu một khi nó tìm thấy bất kỳ bản sao nào vì tự động điền đôi khi mất một giây sau khi tải trang. Đây là một biến thể của một mẫu mã trước đó, nhưng mạnh mẽ hơn và giữ càng nhiều chức năng càng tốt.

(Xác nhận làm việc trong Chrome, Firefox và IE 8.)

CSS sau đây loại bỏ màu nền màu vàng và thay thế nó bằng màu nền bạn chọn. Nó không vô hiệu hóa tự động điền và nó không yêu cầu hack jQuery hoặc Javascript.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

Giải pháp được sao chép từ: Ghi đè điền biểu mẫu và tô sáng đầu vào bằng HTML / CSS

Làm việc cho tôi, chỉ cần thay đổi css.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

bạn có thể đặt bất kỳ màu nào thay cho #ffffff .

Một chút hacky nhưng hoạt động hoàn hảo cho tôi

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Một sự kết hợp của các câu trả lời làm việc cho tôi

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

Đây là phiên bản MooTools của Jason's. Sửa nó trong Safari quá.

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

Điều này khắc phục sự cố trên cả Safari và Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Điều này đã giúp tôi, một phiên bản CSS duy nhất.

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

trong đó màu trắng có thể là bất kỳ màu nào bạn muốn.

Tôi dùng cái này

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

Trong thẻ của bạn, chỉ cần chèn dòng mã nhỏ này.

autocomplete="off"

Tuy nhiên, không đặt mục này trong trường tên người dùng / email / idname vì nếu bạn vẫn đang muốn sử dụng tự động hoàn tất, nó sẽ vô hiệu hóa nó cho trường này. Nhưng tôi đã tìm ra cách khắc phục điều này, chỉ cần đặt mã vào thẻ nhập mật khẩu của bạn bởi vì bạn không bao giờ tự động điền mật khẩu. Khắc phục sự cố này sẽ loại bỏ lực màu, khả năng tự động hoàn thành trên trường email / tên người dùng của bạn và cho phép bạn tránh các vụ hack cồng kềnh như Jquery hoặc javascript.

Nếu bạn muốn loại bỏ hoàn toàn, tôi đã điều chỉnh mã trong các câu trả lời trước để nó hoạt động khi di chuột, hoạt động và tập trung quá:

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

Đây là một giải pháp Mootools hoạt động giống như của Alessandro - thay thế từng đầu vào bị ảnh hưởng bằng một đầu vào mới.

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

Giải pháp đó là gì:

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

Nó tắt tự động hoàn thành và tự động điền (để nền màu vàng biến mất), đợi 100 mili giây sau đó quay lại chức năng tự động hoàn tất mà không cần tự động điền.

Nếu bạn có đầu vào cần phải tự động điền, hãy cung cấp cho họ auto-complete-onlớp css.

Không có giải pháp nào phù hợp với tôi, đầu vào tên người dùng và mật khẩu vẫn đang được phổ biến và được đặt nền màu vàng.

Vì vậy, tôi đã tự hỏi: "Làm thế nào để Chrome xác định những gì nên được tự động điền trên một trang nhất định?"

"Nó có tìm id đầu vào, tên đầu vào không? Id mẫu? Hành động biểu mẫu?"

Thông qua thử nghiệm của tôi với tên người dùng và mật khẩu đầu vào, chỉ có hai cách tôi thấy sẽ khiến Chrome không thể tìm thấy các trường nên được tự động điền:

1) Đặt mật khẩu đầu vào trước đầu vào văn bản. 2) Cung cấp cho họ cùng tên và id ... hoặc không có tên và id.

Sau khi tải trang, với javascript, bạn có thể thay đổi thứ tự của các đầu vào trên trang hoặc tự động cung cấp cho họ tên và id của họ ...

Và Chrome không biết điều gì đã xảy ra ... tự động hoàn tất tắt.

Hack điên, tôi biết. Nhưng nó làm việc cho tôi.

Chrome 34.0.1847.116, OSX 10.7.5

Cách duy nhất phù hợp với tôi là: (Yêu cầu jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Tôi đã sửa vấn đề này cho một trường mật khẩu tôi có như thế này:

Đặt loại đầu vào thành văn bản thay vì mật khẩu

Xóa giá trị văn bản đầu vào bằng jQuery

Chuyển đổi loại đầu vào thành mật khẩu với jQuery

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

Một bản cập nhật cho giải pháp Arjans. Khi cố gắng thay đổi các giá trị, nó sẽ không cho phép bạn. Cái này làm việc tốt cho tôi. Khi bạn tập trung vào một đầu vào thì nó sẽ chuyển sang màu vàng. Nó đủ gần.

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

Hãy thử mã này:

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

trả lời namrouti là chính xác. Nhưng nền vẫn có màu vàng khi đầu vào được chọn . Thêm !importantsửa chữa vấn đề. Nếu bạn cũng muốn textareavà selectvới hành vi tương tự chỉ cần thêmtextarea:-webkit-autofill, select:-webkit-autofill

Chỉ nhập

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

đầu vào, chọn, textarea

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Thêm autocomplete="off"sẽ không cắt nó.

Thay đổi thuộc tính loại đầu vào thành type="search".
Google không áp dụng tự động điền vào các đầu vào với một loại tìm kiếm.

Hy vọng điều này sẽ giúp bạn tiết kiệm thời gian.

Nếu bạn muốn tránh nhấp nháy màu vàng cho đến khi css của bạn được áp dụng, hãy chuyển sang một cậu bé xấu tính như vậy:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

Giải pháp cuối cùng:

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

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

Câu hỏi tương tự: Liên kết

Chỉ thấy mình với cùng một câu hỏi. Điều này làm việc cho tôi:

form :focus {
  outline: none;
}