[javascript] 브라우저 자동 완성 감지

Program / 글쓴이

브라우저가 텍스트 상자를 자동으로 채웠는지 어떻게 알 수 있습니까? 특히 페이지로드를 자동으로 채우는 사용자 이름 및 비밀번호 상자가 있습니다.

첫 번째 질문은 언제 페이지로드 순서에서 발생합니까? document.ready 전후에 있습니까?

둘째, 로직을 사용하여 이것이 발생했는지 어떻게 알 수 있습니까? 나는 이것이 발생하는 것을 막고 싶지 않다. 단지 이벤트에 연결하십시오. 바람직하게는 다음과 같습니다.

if (autoFilled == true) {

} else {

}

가능하다면 귀하의 답변을 보여주는 jsfiddle을보고 싶습니다.

가능한 중복

브라우저 비밀번호 자동 완성에 대한 DOM 이벤트?

브라우저 자동 완성 및 자바 스크립트 트리거 이벤트

-이 질문들은 실제로 어떤 이벤트가 트리거되는지 설명하지는 않지만 텍스트 상자를 지속적으로 다시 확인합니다 (성능에 좋지 않음).

답변

문제는 자동 완성 기능이 브라우저마다 다르게 처리된다는 것입니다. 일부는 변경 이벤트를 전달하지만 일부는 변경 이벤트를 전달하지 않습니다. 따라서 브라우저가 입력 필드를 자동 완성 할 때 트리거되는 이벤트에 연결하는 것은 거의 불가능합니다.

  • 다른 브라우저에 대한 이벤트 트리거 변경 :

    • 사용자 이름 / 비밀번호 필드의 경우 :

      1. Firefox 4, IE 7 및 IE 8은 변경 이벤트를 전달하지 않습니다.
      2. Safari 5와 Chrome 9는 변경 이벤트를 전달합니다.

    • 다른 양식 필드의 경우 :

      1. IE 7 및 IE 8은 변경 이벤트를 전달하지 않습니다.
      2. Firefox 4는 사용자가 제안 목록에서 값을 선택하고 필드에서 탭을 변경하면 변경 변경 이벤트를 전달합니다.
      3. Chrome 9은 변경 이벤트를 전달하지 않습니다.
      4. Safari 5는 변경 이벤트를 전달합니다.

가장 좋은 옵션은 양식에서 사용하는 양식에 대해 자동 완성을 비활성화 autocomplete="off"하거나 정기적으로 폴링하여 양식이 채워져 있는지 확인하는 것입니다.

문서가 채워져 있는지 또는 document.ready 전에 채워지는지에 대한 질문은 브라우저마다, 버전마다 다릅니다. 사용자 이름 / 암호 필드의 경우 사용자 이름 암호 필드를 선택한 경우에만 채워집니다. 따라서 모든 이벤트에 첨부하려고하면 매우 지저분한 코드가 생깁니다.

여기 에서 잘 읽을 수 있습니다.

답변

WebKit 브라우저를위한 솔루션

: -webkit-autofill CSS 의사 클래스에 대한 MDN 문서에서 :

: -webkit-autofill CSS 의사 클래스는 요소가 브라우저에서 자동으로 값을 채울 때 일치합니다.

원하는 요소 에 대해 void 전환 CSS 규칙을 정의 할 수 있습니다 . 그러면 JS가 이벤트 에 연결될 수 있습니다 .<input>:-webkit-autofillanimationstart

Klarna UI 팀 에 대한 크레딧 . 그들의 훌륭한 구현을 여기에서보십시오 :

답변

이것은 최신 Firefox, Chrome 및 Edge에서 작동합니다.

$('#email').on('blur input', function() {
    ....
});

답변

Google 크롬 자동 완성의 경우 다음과 같이 작동했습니다.

if ($("#textbox").is(":-webkit-autofill"))
{
    // the value in the input field of the form was filled in with google chrome autocomplete
}

답변

누군가가 솔루션을 찾고있는 경우 (오늘과 마찬가지로) 브라우저 자동 채우기 변경을 청취하기 위해 입력에 변경 리스너를 추가 할 때 프로세스를 단순화하기 위해 내가 작성한 사용자 정의 jquery 메소드가 있습니다.

    $.fn.allchange = function (callback) {
        var me = this;
        var last = "";
        var infunc = function () {
            var text = $(me).val();
            if (text != last) {
                last = text;
                callback();
            }
            setTimeout(infunc, 100);
        }
        setTimeout(infunc, 100);
    };

다음과 같이 호출 할 수 있습니다.

$("#myInput").allchange(function () {
    alert("change!");
});

답변

나는이 문제에 대해 많이 읽었으며 매우 도움이되는 매우 빠른 해결 방법을 제공하고 싶었습니다.

let style = window.getComputedStyle(document.getElementById('email'))
  if (style && style.backgroundColor !== inputBackgroundNormalState) {
    this.inputAutofilledByBrowser = true
  }

어디에 inputBackgroundNormalState내 템플릿 것은 ‘RGB (255, 255, 255)’.

따라서 기본적으로 브라우저가 자동 완성을 적용하면 입력에 다른 (성가신) 노란색을 적용하여 입력이 자동으로 채워지는 경향이 있습니다.

편집 : 이것은 모든 브라우저에서 작동합니다

답변

불행히도이 크로스 브라우저를 확인하는 유일한 방법은 입력을 폴링하는 것입니다. 반응 형으로 만들기 위해 이벤트도 듣습니다. Chrome에서 해킹이 필요한 자바 스크립트에서 자동 채우기 값을 숨기기 시작했습니다.

  • 매 0.5 분의 3 초마다 설문 조사 (대부분의 경우 즉각적 일 필요는 없음)
  • JQuery를 사용하여 변경 이벤트를 트리거 한 다음 변경 이벤트를 수신하는 함수에서 논리를 수행하십시오.

  • Chrome 숨겨진 자동 완성 비밀번호 값에 대한 수정 사항을 추가하십시오.

    $(document).ready(function () {
    $('#inputID').change(YOURFUNCTIONNAME);
    $('#inputID').keypress(YOURFUNCTIONNAME);
    $('#inputID').keyup(YOURFUNCTIONNAME);
    $('#inputID').blur(YOURFUNCTIONNAME);
    $('#inputID').focusin(YOURFUNCTIONNAME);
    $('#inputID').focusout(YOURFUNCTIONNAME);
    $('#inputID').on('input', YOURFUNCTIONNAME);
    $('#inputID').on('textInput', YOURFUNCTIONNAME);
    $('#inputID').on('reset', YOURFUNCTIONNAME);

    window.setInterval(function() {
        var hasValue = $("#inputID").val().length > 0;//Normal
        if(!hasValue){
            hasValue = $("#inputID:-webkit-autofill").length > 0;//Chrome
        }

        if (hasValue) {
            $('#inputID').trigger('change');
        }
    }, 333);
});