Chrome 양식 자동 완성 및 노란색 배경

IT story

Chrome 양식 자동 완성 및 노란색 배경

hot-time 2020. 4. 7. 08:31

Chrome 양식 자동 완성 및 노란색 배경

Chrome 및 양식 자동 완성 기능에 디자인 문제가 있습니다. Chrome에서 일부 로그인 / 비밀번호를 기억하면 배경색이 노란색으로 바뀝니다.

스크린 샷은 다음과 같습니다.

대체 텍스트

그 배경을 제거 하거나이 자동 채우기를 비활성화하는 방법은 무엇입니까?

"흰색"을 원하는 색상으로 변경하십시오.

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

투명한 입력 필드를 원한다면 전환 및 전환 지연을 사용할 수 있습니다.

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

여기에 해결책 :

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

Firefox에서는 autocomplete = "off / on"속성을 사용하여 양식에서 모든 자동 완성을 비활성화 할 수 있습니다. 마찬가지로 개별 속성 자동 완성은 동일한 속성을 사용하여 설정할 수 있습니다.

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

Chrome에서 제대로 작동하는지 테스트 할 수 있습니다.

입력 요소에 첨부 된 데이터, 첨부 된 핸들러 및 기능뿐만 아니라 자동 완성을 유지하려면 다음 스크립트를 시도하십시오.

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

자동 완성 요소를 찾을 때까지 폴링하고 데이터와 이벤트를 포함하여 요소를 복제 한 다음 동일한 위치의 DOM에 삽입하고 원본을 제거합니다. 페이지 채우기 후 자동 채우기가 1 초 정도 걸리므로 복제 할 항목이 있으면 폴링을 중지합니다. 이것은 이전 코드 샘플의 변형이지만 더 강력하고 가능한 많은 기능을 그대로 유지합니다.

(Chrome, Firefox 및 IE 8에서 작동하는지 확인했습니다.)

다음 CSS는 노란색 배경색을 제거하고 선택한 배경색으로 바꿉니다. 자동 채우기를 비활성화하지 않으며 jQuery 또는 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;
}

솔루션 복사에서 : HTML / CSS로 강조 재정의 브라우저 양식 작성 및 입력

나를 위해 일한 CSS 변경 만 필요합니다.

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

#ffffff 대신 어떤 색이든 넣을 수 있습니다 .

조금 해 키지 만 완벽하게 작동합니다.

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

대답의 조합이 나를 위해 일했습니다.

<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>

다음은 Jason MooTools 버전입니다. Safari에서도 수정합니다.

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


    }
});

이것은 Safari와 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);
}

이것은 CSS 전용 버전이었습니다.

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

어디 흰색 당신이 원하는 어떤 색깔이 될 수 있습니다.

나는 이것을 사용한다.

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 */

태그에이 작은 코드 줄을 삽입하십시오.

autocomplete="off"

그러나 자동 완성 기능을 계속 사용하려는 경우이 필드에서는이 기능이 비활성화되므로 username / email / idname 필드에이를 배치하지 마십시오. 그러나 암호를 자동 완성하지 않으므로 코드를 암호 입력 태그에 넣으면됩니다. 이 수정은 전자 메일 / 사용자 이름 필드에서 색의 힘, matinain 자동 완성 기능을 제거하고 Jquery 또는 javascript와 같은 부피가 큰 해킹을 피할 수 있도록합니다.

완전히 제거하려면 이전 답변의 코드를 조정하여 호버링, 활성 및 초점에서도 작동하도록하십시오.

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

Alessandro와 동일한 작업을 수행하는 Mootools 솔루션은 다음과 같습니다. 영향을받는 각 입력을 새로운 입력으로 바꿉니다.

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

그 솔루션은 어떻습니까?

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

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

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

자동 완성 및 자동 완성을 끄고 (노란색 배경이 사라짐) 100 밀리 초 기다린 다음 자동 완성없이 자동 완성 기능을 다시 설정합니다.

자동 입력이 필요한 입력이 있으면 auto-complete-onCSS 클래스 를 제공하십시오 .

어떤 해결책도 나를 위해 일하지 않았습니다. 사용자 이름과 비밀번호 입력은 여전히 채워지고 노란색 배경이 주어졌습니다.

"자신이 Chrome에서 특정 페이지에서 자동 완성해야하는 내용을 어떻게 결정합니까?"

"입력 ID, 입력 이름을 찾습니까? 양식 ID? 양식 조치?"

사용자 이름과 비밀번호 입력을 실험 한 결과 Chrome에서 자동 완성해야하는 입력란을 찾지 못하는 두 가지 방법 만있었습니다.

1) 비밀번호 입력을 텍스트 입력보다 먼저 설정하십시오. 2) 동일한 이름과 ID를 부여하십시오 ... 또는 이름과 ID가 없습니다.

페이지가로드 된 후, 자바 스크립트를 사용하면 페이지의 입력 순서를 변경하거나 동적으로 이름과 ID를 지정할 수 있습니다 ...

Chrome은 그 결과가 무엇인지 알지 못합니다. 자동 완성 기능은 계속 유지됩니다.

미친 해킹. 그러나 그것은 나를 위해 일하고 있습니다.

크롬 34.0.1847.116, OSX 10.7.5

나를 위해 작동하는 유일한 방법은 다음과 같습니다. (jQuery 필요)

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

암호 필드에 대해이 문제를 해결했습니다.

입력 유형을 비밀번호 대신 텍스트로 설정

jQuery로 입력 텍스트 값을 제거하십시오.

jQuery를 사용하여 입력 유형을 비밀번호로 변환

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

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

Arjans 솔루션에 대한 업데이트. 값을 변경하려고하면 허용되지 않습니다. 이것은 나를 위해 잘 작동합니다. 입력에 초점을 맞추면 노란색으로 바뀝니다. 충분히 가깝습니다.

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

이 코드를 사용해보십시오 :

 	$(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">

운이 좋은 namrouti 답변이 정확합니다. 그러나 입력을 선택 하면 배경이 여전히 노란색으로 표시됩니다 . 추가하면 !important문제가 해결됩니다. 당신은 또한 원하는 경우 textarea와 select같은 행동 단지 추가textarea:-webkit-autofill, select:-webkit-autofill

입력 만

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

입력, 선택, 텍스트 영역

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

추가 autocomplete="off"는 자르지 않을 것입니다.

입력 유형 속성을로 변경하십시오 type="search".
Google은 검색 유형의 입력에 자동 완성을 적용하지 않습니다.

시간이 절약되기를 바랍니다.

CSS가 적용될 때까지 노란색 깜박임을 피하려면 나쁜 소년의 전환을 다음과 같이 때립니다.

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

최종 솔루션 :

$(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" />

비슷한 질문 : 링크

같은 질문으로 자신을 발견했습니다. 이것은 나를 위해 작동합니다 :

form :focus {
  outline: none;
}

참고 URL : https://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background

'IT story' 카테고리의 다른 글

PHP는 백그라운드 프로세스를 실행 (0)	2020.04.07
Erlang은 어디에 사용되며 왜 그런가요? (0)	2020.04.07
MySQL SELECT 만 null 값이 아닙니다 (0)	2020.04.07
'찾기'를 사용하여 특정 날짜에 작성된 파일을 검색하는 방법은 무엇입니까? (0)	2020.04.07
XPath를 통해 속성 노드 값 추출 (0)	2020.04.07

현재글Chrome 양식 자동 완성 및 노란색 배경

hot-time

Chrome 양식 자동 완성 및 노란색 배경

Chrome 양식 자동 완성 및 노란색 배경

'IT story' 카테고리의 다른 글

'IT story'의 다른글

티스토리툴바

Chrome 양식 자동 완성 및 노란색 배경

Chrome 양식 자동 완성 및 노란색 배경

'IT story' 카테고리의 다른 글

'IT story'의 다른글

관련글

티스토리툴바