Google Chrome form autofill 및 노란색 배경
구글 크롬과 자동채움 기능에 디자인 문제가 있습니다.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에서는 autoccomplete="off/on" 특성을 사용하여 양식의 모든 자동 완성을 비활성화할 수 있습니다.마찬가지로 개별 항목도 동일한 속성을 사용하여 자동 완성을 설정할 수 있습니다.
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
이것은 크롬에서 테스트가 가능합니다.
입력 요소에 연결된 데이터, 첨부된 핸들러 및 기능뿐만 아니라 자동 채우기를 보존하려면 다음 스크립트를 사용해 보십시오.
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나 자바스크립트 해킹이 필요하지 않습니다.
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;
}
#fffff 대신 어떤 색이든 넣을 수 있습니다.
조금 서툴지만 저에게는 완벽하게 잘 맞습니다.
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>
여기 제이슨의 무툴즈 버전이 있습니다.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);
}
});
이를 통해 사파리와 크롬 모두의 문제가 해결됩니다.
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"
그러나 사용자 이름/이메일/idname 필드에는 자동 완성을 사용하려는 경우 이 필드에 대해 사용할 수 없으므로 이 필드를 사용하지 마십시오.하지만 저는 이것을 해결할 방법을 찾았습니다. 비밀번호 입력 태그에 코드를 입력하기만 하면 됩니다. 어차피 비밀번호를 자동으로 완료할 수 없기 때문입니다.이 수정은 색력을 제거하고 전자 메일/사용자 이름 필드의 자동 완성 기능을 유지하며 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;
}
만약 당신이 당신의 CSS가 적용될 때까지 노란 점멸을 피하고 싶다면, 그 나쁜 소년에게 다음과 같이 변화를 주어라:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
transition: background-color 10s ease-in-out 0s;
}
여기 알레산드로와 동일한 기능을 수행하는 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, 입력 이름을 찾습니까?아이들?폼 액션?"
사용자 이름과 암호 입력에 대한 실험을 통해 Chrome이 자동으로 채워져야 하는 필드를 찾을 수 없게 하는 방법은 두 가지밖에 없었습니다.
1) 문자 입력 앞에 비밀번호 입력을 둡니다.2) 그들에게 같은 이름과 아이디를...이름과 ID가 없습니다.
페이지가 로드된 후 javascript를 사용하면 페이지의 입력 순서를 변경하거나 동적으로 이름과 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">fareed 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".
구글은 검색 유형이 있는 입력에 자동 채우기를 적용하지 않습니다.
시간을 좀 아끼길 바랍니다.
제 경우에 효과가 있었던 유일한 해결책은 다음과 같습니다.
:-webkit-autofill {
-webkit-text-fill-color: #000; /* ok for text, no hack */
transition-property: background-color; /* begin hack for background... */
transition-delay: 100000s; /* ...end hack for background */
}
이 솔루션은 이상적이지 않습니다. 더 나은 솔루션을 찾기 위해 기다리는 동안...
최종 해결책:
$(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
'programing' 카테고리의 다른 글
| DDD(Data Display Debugger)의 좋은 유닉스 대안은 무엇입니까? (0) | 2023.10.21 |
|---|---|
| 로컬, 전역, 정적, 자동, 레지스터, 외부, 상수 및 휘발성 변수는 어디에 저장됩니까? (0) | 2023.10.21 |
| 마리아드브 갈레라 성단과 캡 정리 (0) | 2023.10.21 |
| 자바스크립트는 어떻게 블롭을 업로드 할 수 있습니까? (0) | 2023.10.21 |
| 상위 범위가 지정된 Angularjs에서 모든 하위 범위를 가져옵니다. (0) | 2023.10.21 |