복붙노트

[JQUERY] 감지 브라우저 자동 채우기

JQUERY

감지 브라우저 자동 채우기

해결법

  1. 1.문제는 자동 완성 서로 다른 브라우저에서 다르게 처리됩니다. 일부는 변경 이벤트를 전달, 일부는하지 않습니다. 그래서 브라우저가 입력 필드를 자동 완성 때 트리거되는 이벤트에 끼어 것은 거의 불가능하다.

    문제는 자동 완성 서로 다른 브라우저에서 다르게 처리됩니다. 일부는 변경 이벤트를 전달, 일부는하지 않습니다. 그래서 브라우저가 입력 필드를 자동 완성 때 트리거되는 이벤트에 끼어 것은 거의 불가능하다.

    그 채워진 경우 가장 좋은 옵션은 "OFF"자동 완성을 사용하여 양식 = 대한 중 하나를 비활성화 자동 완성에있는 일정한 간격의 양식이나 설문 조사에서 볼 수 있습니다.

    가에 가득 또는 그 이전 document.ready 다시이 버전의 브라우저에서도 버전으로 브라우저에서 변화 여부에 대한 질문하십시오. 사용자 이름 / 암호 필드를 들어 사용자 이름 암호 필드가 작성되어 선택한 경우에만 사용할 수 있습니다. 당신이 어떤 이벤트에 연결하려고하면 그래서 모두 당신은 매우 지저분한 코드를 가지고있다.

    당신은 여기에 좋은 읽기를 할 수 있습니다

  2. 2.-webkit-자동 완성의 CSS 의사 클래스 다음의 MDN의 문서에서 :

    -webkit-자동 완성의 CSS 의사 클래스 다음의 MDN의 문서에서 :

    -webkit-자동 완성 : 그것은 일단 우리가 원하는 요소에 보이드 전이 CSS 규칙을 정의 할 수있다. JS 다음 animationstart 이벤트 사이에 끼어 할 수있을 것이다.

    Klarna UI 팀에 크레딧. 여기에 자신의 좋은 구현을 참조하십시오 :

  3. 3.최신 파이어 폭스, 크롬, 그리고 가장자리에 나를 위해이 작품 :

    최신 파이어 폭스, 크롬, 그리고 가장자리에 나를 위해이 작품 :

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

  4. 4.크롬 자동 완성 구글의 경우, 이것은 나를 위해 일한 :

    크롬 자동 완성 구글의 경우, 이것은 나를 위해 일한 :

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

  5. 5.나는이 문제에 대해 많이 읽고 나에게 도움이 매우 빠른 해결 방법을 제공 싶었다.

    나는이 문제에 대해 많이 읽고 나에게 도움이 매우 빠른 해결 방법을 제공 싶었다.

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

    내 템플릿에 대한 inputBackgroundNormalState은 'RGB (255, 255, 255)'이다.

    브라우저가 자동 완성을 적용 할 때 그래서 기본적으로 그들은 입력이 입력의 다른 (성가신) 노란색을 적용하여 자동 완성되었음을 나타냅니다하는 경향이있다.

    편집 : 모든 브라우저에이 작품

  6. 6.이런 경우에 누군가가 브라우저 자동 완성 변경을들을 수있는 솔루션 (오늘이었다처럼)을 찾고, 여기에 내가 입력으로 변경 리스너를 추가 할 때 단지 였는지를 단순화하기 위해 구축 한 것으로 사용자 정의 JQuery와 방법입니다 :

    이런 경우에 누군가가 브라우저 자동 완성 변경을들을 수있는 솔루션 (오늘이었다처럼)을 찾고, 여기에 내가 입력으로 변경 리스너를 추가 할 때 단지 였는지를 단순화하기 위해 구축 한 것으로 사용자 정의 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!");
});

  7. 7.GitHub의에서이 문제를 해결하기 위해 새로운 polyfill 구성 요소가 있습니다. 자동 채우기 이벤트에서보세요. 그냥 예상대로 자동 완성 작품을 설치 봐라 정자해야합니다.

    GitHub의에서이 문제를 해결하기 위해 새로운 polyfill 구성 요소가 있습니다. 자동 채우기 이벤트에서보세요. 그냥 예상대로 자동 완성 작품을 설치 봐라 정자해야합니다.

    bower install autofill-event

  8. 8.불행하게도 난이 크로스 브라우저를 확인하기 위해 찾은 신뢰할 수있는 유일한 방법은 입력을 폴링하는 것입니다. 이 반응 또한 이벤트를 수신 확인하십시오. 크롬은 해킹을 필요로 자바 스크립트에서 숨어 자동 채우기 값을 시작했다.

    불행하게도 난이 크로스 브라우저를 확인하기 위해 찾은 신뢰할 수있는 유일한 방법은 입력을 폴링하는 것입니다. 이 반응 또한 이벤트를 수신 확인하십시오. 크롬은 해킹을 필요로 자바 스크립트에서 숨어 자동 채우기 값을 시작했다.

  9. 9.내 솔루션 :

    내 솔루션 :

    변경 이벤트 들어 평소와 DOM 콘텐츠로드, 이렇게 같은 :

    setTimeout(function() {
    $('input').each(function() {
        var elem = $(this);
        if (elem.val()) elem.change();
    })
}, 250);

    이것은 사용자가 편집 그들에게 기회가 전에 비어 있지 않은 모든 필드의 변경 이벤트를 발생합니다.

  10. 10.또한 레이블이 중복 된 텍스트를 작성에 레이블을 이동 자동 완성 및 애니메이션을 감지하지 못했습니다 같은 문제에 직면하고이 솔루션은 날 위해 일했습니다.

    또한 레이블이 중복 된 텍스트를 작성에 레이블을 이동 자동 완성 및 애니메이션을 감지하지 못했습니다 같은 문제에 직면하고이 솔루션은 날 위해 일했습니다.

    input:-webkit-autofill ~ label {
    top:-20px;
}

  11. 11.나는 비슷한 일을 찾고 있었다. 크롬은 ... 내 경우에는 래퍼 사업부는 입력 필드가 자동 완성되었는지 알 필요가 있었다. 나는 그에게 그것을 autofills 때 크롬이 입력 필드에 수행처럼 별도의 CSS를 줄 수 있도록. 내 통합 솔루션 위의 모든 해답 살펴보면 다음이었다 :

    나는 비슷한 일을 찾고 있었다. 크롬은 ... 내 경우에는 래퍼 사업부는 입력 필드가 자동 완성되었는지 알 필요가 있었다. 나는 그에게 그것을 autofills 때 크롬이 입력 필드에 수행처럼 별도의 CSS를 줄 수 있도록. 내 통합 솔루션 위의 모든 해답 살펴보면 다음이었다 :

    /* 
 * make a function to use it in multiple places
 */
var checkAutoFill = function(){
    $('input:-webkit-autofill').each(function(){
        $(this).closest('.input-wrapper').addClass('autofilled');
    });
}

/* 
 * Put it on the 'input' event 
 * (happens on every change in an input field)
 */
$('html').on('input', function() {
    $('.input-wrapper').removeClass('autofilled');
    checkAutoFill();
});

/*
 * trigger it also inside a timeOut event 
 * (happens after chrome auto-filled fields on page-load)
 */
setTimeout(function(){ 
    checkAutoFill();
}, 0);

    일이에 대한 HTML이 될 것이다

    <div class="input-wrapper">
    <input type="text" name="firstname">
</div>

  12. 12.나는이 오래된 스레드 알고 있지만 많은 사람들이 여기에 대한 해결책을 찾기 위해 오는 상상할 수있다.

    나는이 오래된 스레드 알고 있지만 많은 사람들이 여기에 대한 해결책을 찾기 위해 오는 상상할 수있다.

    입력 (들)로 값을 (들)이있는 경우이 작업을 수행하려면, 당신은 확인할 수 있습니다 :

    $(function() {
    setTimeout(function() {
        if ($("#inputID").val().length > 0) {
            // YOUR CODE
        }
    }, 100);
});

    나는 버튼을 제출 수 있도록 장전 할 때 내 로그인 폼에서 값을 확인하려면이 나 자신을 사용합니다. 코드는 jQuery를 위해 만든하지만 필요한 경우 쉽게 변경할 수 있습니다.

  13. 13.이 렌더링 엔진 웹킷과 브라우저 솔루션입니다. 양식 자동 완성되면, 입력은 의사 클래스를 얻을 것이다 : -webkit-autofill- (f.e. 입력 : -webkit-자동 완성 {...}). 그래서 이것은 당신이 자바 스크립트를 통해 확인을해야하는지 식별자입니다.

    이 렌더링 엔진 웹킷과 브라우저 솔루션입니다. 양식 자동 완성되면, 입력은 의사 클래스를 얻을 것이다 : -webkit-autofill- (f.e. 입력 : -webkit-자동 완성 {...}). 그래서 이것은 당신이 자바 스크립트를 통해 확인을해야하는지 식별자입니다.

    몇 가지 테스트 양식 솔루션 :

    <form action="#" method="POST" class="js-filled_check">

    <fieldset>

        <label for="test_username">Test username:</label>
        <input type="text" id="test_username" name="test_username" value="">

        <label for="test_password">Test password:</label>
        <input type="password" id="test_password" name="test_password" value="">

        <button type="submit" name="test_submit">Test submit</button>

    </fieldset>

</form>

    그리고 자바 스크립트 :

    $(document).ready(function() {

    setTimeout(function() {

        $(".js-filled_check input:not([type=submit])").each(function (i, element) {

            var el = $(this),
                autofilled = (el.is("*:-webkit-autofill")) ? el.addClass('auto_filled') : false;

            console.log("element: " + el.attr("id") + " // " + "autofilled: " + (el.is("*:-webkit-autofill")));

        });

    }, 200);

});

    문제 페이지가로드 get 및 암호 값도 길이가됩니다. 이 브라우저의 보안 때문입니다. 브라우저가 시간 순서 후 양식을 작성하기 때문에 또한 시간 제한, 그것은이다.

    이 코드는 작성 입력에 auto_filled 클래스를 추가합니다. 또한, 나는 입력 password를 입력 값, 또는 길이를 확인하려고하지만 페이지에 대한 몇 가지 사건이 일어난 직후 일입니다. 나는 몇 가지 이벤트를 트리거 시도 그래서,하지만 성공하지. 지금이 내 솔루션입니다. 즐겨!

  14. 14.나는이 질문에 대한 완벽한 솔루션이 코드를 시도 할 수 있습니다. 데모는 여기

    나는이 질문에 대한 완벽한 솔루션이 코드를 시도 할 수 있습니다. 데모는 여기

    ModernForm 함수 () { VAR modernInputElement = $ ( 'js_modern_input.'); recheckAllInput 함수 () { modernInputElement.each (함수 () { ($ (이) .val ()! == '') 경우 { $ (이) .parent () 발견 ( '라벨') addClass ( '초점')..; } }); } modernInputElement.on ({) (, 기능을 '클릭' $ (이) .parent () 발견 ( '라벨') addClass ( '초점')..; }); modernInputElement.on ( "흐림", 함수 () { 경우 ($ (이) .val () === '') { $ (이) .parent () 발견 ( '라벨') removeClass ( '초점')..; } 다른 { recheckAllInput (); } }); } ModernForm (); .form_sec { 패딩 : 30 픽셀; } .form_sec .form_input_wrap { 위치 : 상대; } .form_sec .form_input_wrap 라벨 { 위치 : 절대; 상단 : 25 픽셀; 왼쪽 : 15 픽셀; 폰트 사이즈 : 16px; 폰트 중량 : 600; Z- 색인 : 1; 색상 : # 333; -webkit-전환 : 모든 용이성 - 아웃 0.35s; -moz-전환 : 모든 용이성 - 아웃 0.35s; -ms-전환 : 모든 용이성 - 아웃 0.35s; -o 전이 : 모든 용이성 - 아웃 0.35s; 전환 : 모든 용이성 - 아웃 0.35s; } .form_sec .form_input_wrap label.focus { 상단 : 5px; 색상 : # a7a9ab; 폰트 중량 : 300; -webkit-전환 : 모든 용이성 - 아웃 0.35s; -moz-전환 : 모든 용이성 - 아웃 0.35s; -ms-전환 : 모든 용이성 - 아웃 0.35s; -o 전이 : 모든 용이성 - 아웃 0.35s; 전환 : 모든 용이성 - 아웃 0.35s; } .form_sec .form_input { 폭 : 100 %; 폰트 사이즈 : 16px; 폰트 중량 : 600; 색상 : # 333; 테두리 : 없음; 국경 바닥 : 2 픽셀 고체 #의 d3d4d5; 패딩 : 30 픽셀 0 5px 0; 개요 : 없음; } .form_sec .form_input.err { 국경 - 하단 색상 : # 888; } .form_sec .cta_login { 국경 : 1 픽셀의 고체 #의 ec1940; 경계 반경 : 2 픽셀; 배경 색상 : # ec1940; 폰트 사이즈 : 14px; 폰트 중량 : 500; 텍스트 정렬 : 센터; 색상 : #FFFFFF; 패딩 : 15 픽셀 40px; 여백 - 상단 : 30 픽셀; 표시 : 인라인 블록; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    <레이블> 전체 이름
    <레이블> Emaill
    <레이블> 주소 라인 1
    <레이블> 시티 <입력 유형 = "텍스트"이름 = "도시"클래스 = "form_input js_modern_input">
    <레이블> 상태
    <레이블> 국가 <입력 유형 = "텍스트"이름 = "국가"클래스 = "form_input js_modern_input">
    <레이블> 핀
    제출 <버튼 타입 = 클래스 = "cta_login"를 "제출">

  15. 15.크롬에, 당신은 자동 완성 요소를 설정하여 특정 CSS 규칙을 자동 완성 필드를 검색 할 수 있습니다, 그리고 요소는 규칙을 적용하는 것이있는 경우 다음 자바 스크립트로 검사합니다.

    크롬에, 당신은 자동 완성 요소를 설정하여 특정 CSS 규칙을 자동 완성 필드를 검색 할 수 있습니다, 그리고 요소는 규칙을 적용하는 것이있는 경우 다음 자바 스크립트로 검사합니다.

    예:

    CSS

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

    자바 스크립트

      let css = $("#selector").css("box-shadow")
  if (css.match(/inset/))
    console.log("autofilled:", $("#selector"))

  16. 16.여기 Klarna UI 팀에서 가져온 CSS 솔루션입니다. 여기에 자신의 좋은 구현 리소스를 참조하십시오

    여기 Klarna UI 팀에서 가져온 CSS 솔루션입니다. 여기에 자신의 좋은 구현 리소스를 참조하십시오

    나를 위해 잘 작동합니다.

    input:-webkit-autofill {
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
  animation-name: onAutoFillCancel;
}

  17. 17.나는 같은 문제에 대한이 솔루션을 사용했다.

    나는 같은 문제에 대한이 솔루션을 사용했다.

    HTML 코드는 다음에 변경해야합니다 :

    <input type="text" name="username" />
<input type="text" name="password" id="txt_password" />

    및 jQuery 코드는 document.ready에 있어야합니다 :

    $('#txt_password').focus(function(){
    $(this).attr('type','password');
});

  18. 18.-webkit-자동 완성은 입력가 작성되었음을 알려드립니다 : 크롬과 에지 (2020)에서 확인. 그러나 어떤 방법으로 페이지와 사용자의 상호 작용까지, 자바 스크립트는 입력의 값을 얻을 수 없습니다.

    -webkit-자동 완성은 입력가 작성되었음을 알려드립니다 : 크롬과 에지 (2020)에서 확인. 그러나 어떤 방법으로 페이지와 사용자의 상호 작용까지, 자바 스크립트는 입력의 값을 얻을 수 없습니다.

    $ 사용 ( 'X'). 초점 ()와 $ ( 'X'). 흐림 () 또는 코드에서 마우스 이벤트를 트리거 도움이되지 않습니다.

    https://stackoverflow.com/a/35783761/32429 참조

  19. 19.나는 PWD 필드가 자동으로 채워 있었다면 확인하기 위해 사용자 이름에 blur 이벤트를 사용했다.

    나는 PWD 필드가 자동으로 채워 있었다면 확인하기 위해 사용자 이름에 blur 이벤트를 사용했다.

     $('#userNameTextBox').blur(function () {
        if ($('#userNameTextBox').val() == "") {
            $('#userNameTextBox').val("User Name");
        }
        if ($('#passwordTextBox').val() != "") {
            $('#passwordTextBoxClear').hide(); // textbox with "Password" text in it
            $('#passwordTextBox').show();
        }
    });

    이 IE를 위해 작동하고, (난 단지 IE를 확인했지만) 다른 모든 브라우저에서 작동합니다

  20. 20.저도 같은 문제를 겪고 난이 솔루션을 작성했습니다.

    저도 같은 문제를 겪고 난이 솔루션을 작성했습니다.

    페이지가 로딩 (I 10 초를 설정 한하지만 조정이 값을 할 수있는) 경우는 모든 입력 필드에 폴링을 시작합니다. 10 초 후에는 모든 입력 필드에 폴링을 중지하고는 (한 경우)에만 초점을 맞춘 입력에 폴링을 시작합니다. 당신이 입력을 흐리게하고 당신이 하나를 집중하면 다시 시작할 때이 중지됩니다.

    정말 필요한 만 유효한 입력을 할 때이 방법으로 만 폴링.

    // This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on the focused inputs (because user can select from the autofill dropdown only when the input has focus)
var focused;
$(document)
.on("focus", "input", function() {
    var $this = $(this);
    focused = setInterval(function() {
        if ($this.val() !== $this.attr("value")) {
            $this.trigger("change");
        }
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

    여러 값이 자동으로 삽입이있을 때 그것은 아주 잘 작동하지 않지만, 현재 양식의 모든 입력을 찾고 불통이 될 수 있습니다.

    뭔가 같은 :

    // This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on inputs of the focused form
var focused;
$(document)
.on("focus", "input", function() {
    var $inputs = $(this).parents("form").find("input");
    focused = setInterval(function() {
        $inputs.each(function() {
            if ($(this).val() !== $(this).attr("value")) {
                $(this).trigger("change");
            }
        });
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

  21. 21.만 자동 채우기 오히려되는 필드 자동 채우기가 사용 된 경우와 정확히 감지보다 사용되었는지의 여부를 검색하려면, 당신은 단순히 자동으로 입력 한 다음이 있는지 여부를 확인하는 숨겨진 요소를 추가 할 수 있습니다 어떤 값을 포함합니다. 나는 이것이 많은 사람들이에 관심이있는 것이 아닐 수 있음을 이해합니다. 음이 tabIndex으로 잘 화면 오프 절대 좌표로 입력 필드를 설정합니다. 이 입력은 입력의 나머지 부분과 같은 형태의 일부 것이 중요합니다. 당신은 자동 채우기에 의해 포착 될 이름을 사용해야합니다 (예를. "secondname을").

    만 자동 채우기 오히려되는 필드 자동 채우기가 사용 된 경우와 정확히 감지보다 사용되었는지의 여부를 검색하려면, 당신은 단순히 자동으로 입력 한 다음이 있는지 여부를 확인하는 숨겨진 요소를 추가 할 수 있습니다 어떤 값을 포함합니다. 나는 이것이 많은 사람들이에 관심이있는 것이 아닐 수 있음을 이해합니다. 음이 tabIndex으로 잘 화면 오프 절대 좌표로 입력 필드를 설정합니다. 이 입력은 입력의 나머지 부분과 같은 형태의 일부 것이 중요합니다. 당신은 자동 채우기에 의해 포착 될 이름을 사용해야합니다 (예를. "secondname을").

    var autofilldetect = document.createElement('input');
autofilldetect.style.position = 'absolute';
autofilldetect.style.top = '-100em';
autofilldetect.style.left = '-100em';
autofilldetect.type = 'text';
autofilldetect.name = 'secondname';
autofilldetect.tabIndex = '-1';

    양식이 입력을 추가 제출 양식에 값을 확인합니다.

  22. 22.(적어도 크롬) 폴링에 의존하지 않는이에 대한 해결책이있을 나타나지 않습니다. 그것은 거의 hackish로,하지만 난 변두리에 더 나은 세계 폴링보다 생각.

    (적어도 크롬) 폴링에 의존하지 않는이에 대한 해결책이있을 나타나지 않습니다. 그것은 거의 hackish로,하지만 난 변두리에 더 나은 세계 폴링보다 생각.

    다음과 같은 시나리오를 생각해보십시오 :

    해결 방법 : 등록 다음 jQuery를 통해 자동으로 채워진 필드의 존재에 대한 검사 $ 니펫하는 모든 분야에 위해 onblur ( ': - 웹킷 - 자동 완성')

    사용자 흐리게이 필드 1 때까지 지연되기 때문에이 즉시되지 않습니다하지만 그렇게 IMO 글로벌 폴링에 의존하지 않는, 그것은 더 나은 솔루션입니다.

    (가) 키가 양식을 제출할 수 있습니다 입력 타격 때문에 즉, 당신은 또한 때 onKeyPress에 해당하는 핸들러를해야 할 수도있다.

    또는, 당신은 $을 확인하기 위해 글로벌 폴링을 사용할 수 있습니다 ( '- 웹킷 - 자동 완성')

  23. 23.내 개인적인 경험에서, 코드 아래의 파이어 폭스 IE와 사파리 잘 작동하지만 크롬에서 자동 완성을 따기에서 잘 작동하지 않습니다.

    내 개인적인 경험에서, 코드 아래의 파이어 폭스 IE와 사파리 잘 작동하지만 크롬에서 자동 완성을 따기에서 잘 작동하지 않습니다.

    function check(){
clearTimeout(timeObj);
 timeObj = setTimeout(function(){
   if($('#email').val()){
    //do something
   }
 },1500);
}

$('#email').bind('focus change blur',function(){
 check();
});

    그 때마다 트리거 때문에 코드가 더 잘 작동 아래 입력 필드와에서 사용자가 클릭하면 입력 필드가 비어 여부 중 하나가 확인할 수 있습니다 때.

    $('#email').bind('click', function(){
 check();
});

  24. 24.나는 크롬에 성공했다 :

    나는 크롬에 성공했다 :

        setTimeout(
       function(){
          $("#input_password").focus();
          $("#input_username").focus();
          console.log($("#input_username").val());
          console.log($("#input_password").val());
       }
    ,500);

  25. 25.내 솔루션입니다 :

    내 솔루션입니다 :

        $.fn.onAutoFillEvent = function (callback) {
        var el = $(this),
            lastText = "",
            maxCheckCount = 10,
            checkCount = 0;

        (function infunc() {
            var text = el.val();

            if (text != lastText) {
                lastText = text;
                callback(el);
            }
            if (checkCount > maxCheckCount) {
                return false;
            }
            checkCount++;
            setTimeout(infunc, 100);
        }());
    };

  $(".group > input").each(function (i, element) {
      var el = $(element);

      el.onAutoFillEvent(
          function () {
              el.addClass('used');
          }
      );
  });

  26. 26.조사 후 문제는 웹킷 브라우저가 자동 완성에 화재 변경 이벤트를하지 않는 것입니다. 내 솔루션은 자신에 의해 웹킷을 추가하는 자동 완성 클래스와 트리거 변경 이벤트를 얻을 수 있었다.

    조사 후 문제는 웹킷 브라우저가 자동 완성에 화재 변경 이벤트를하지 않는 것입니다. 내 솔루션은 자신에 의해 웹킷을 추가하는 자동 완성 클래스와 트리거 변경 이벤트를 얻을 수 있었다.

    setTimeout(function() {
 if($('input:-webkit-autofill').length > 0) {
   //do some stuff
 }
},300)

    여기에 크롬의 문제에 대한 링크입니다. https://bugs.chromium.org/p/chromium/issues/detail?id=636425

  27. 27.나는 파이어 폭스에서 자동 채우기를 검출 힘든 시간이 있었다. 이것은 나를 위해 일한 유일한 솔루션입니다 :

    나는 파이어 폭스에서 자동 채우기를 검출 힘든 시간이 있었다. 이것은 나를 위해 일한 유일한 솔루션입니다 :

    데모

    HTML :

    <div class="inputFields">
   <div class="f_o">
      <div class="field_set">
        <label class="phold">User</label>
        <input type="tel" class="form_field " autocomplete="off" value="" maxlength="50">
      </div>
   </div>
   <div class="f_o">
      <div class="field_set">
         <label class="phold">Password</label>
         <input type="password" class="form_field " autocomplete="off" value="" maxlength="50">
      </div>
   </div>
</div>

    CSS :

    /* Detect autofill for Chrome */
.inputFields input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s;
}
.inputFields input:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
}

@keyframes onAutoFillStart {
}

@keyframes onAutoFillCancel {
}
.inputFields {
  max-width: 414px;
}

.field_set .phold{
  display: inline-block;
  position: absolute;
  font-size: 14px;
  color: #848484;
  -webkit-transform: translate3d(0,8px,0);
  -ms-transform: translate3d(0,8px,0);
  transform: translate3d(0,8px,0);
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  background-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin-left: 8px;
  z-index: 1;
  left: 0;
  pointer-events: none;
}

.field_set .phold_active {
   font-size: 12px;
   -webkit-transform: translate3d(0,-8px,0);
  -ms-transform: translate3d(0,-8px,0);
  transform: translate3d(0,-8px,0);
  background-color: #FFF;
  padding-left: 3px;
  padding-right: 3px;
}

.field_set input[type='text'], .field_set select, .field_set input[type='tel'], .field_set input[type='password'] {
    height: 36px;
}

.field_set input[type='text'], .field_set input[type='tel'], .field_set input[type='password'], .field_set select, .field_set textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ababab;
    border-radius: 0;
}

.field_set {
    margin-bottom: 10px;
    position: relative;
}

.inputFields .f_o {
    width: 100%;
    line-height: 1.42857143;
    float: none;
}

    자바 스크립트 :

        // detect auto-fill when page is loading
  $(window).on('load', function() {
    // for sign in forms when the user name and password are filled by browser
    getAutofill('.inputFields');
  });

  function getAutofill(parentClass) {
    if ($(parentClass + ' .form_field').length > 0) {    
      var formInput = $(parentClass + ' .form_field');
      formInput.each(function(){   
        // for Chrome:  $(this).css('animation-name') == 'onAutoFillStart'
        // for Firefox: $(this).val() != ''
        if ($(this).css('animation-name') == 'onAutoFillStart' || $(this).val() != '') {
          $(this).siblings('.phold').addClass('phold_active');
        } else {
          $(this).siblings('.phold').removeClass('phold_active');
        }
      });
    }
  } 

  $(document).ready(function(){

    $(document).on('click','.phold',function(){
      $(this).siblings('input, textarea').focus();
    });
    $(document).on('focus','.form_field', function(){
      $(this).siblings('.phold').addClass('phold_active');
    });

    // blur for Chrome and change for Firefox
    $(document).on('blur change','.form_field', function(){
      var $this = $(this);
      if ($this.val().length == 0) {        
        $(this).siblings('.phold').removeClass('phold_active');
      } else {
        $(this).siblings('.phold').addClass('phold_active');
      }
    });

    // case when form is reloaded due to errors
    if ($('.form_field').length > 0) {
      var formInput = $('.form_field');
      formInput.each(function(){
        if ($(this).val() != '') {
          $(this).siblings('.phold').addClass('phold_active');
        } else {
          $(this).siblings('.phold').removeClass('phold_active');
        }
      });
    }

  });

    크롬 I 사용의 경우 : 만약 ($ (이) .CSS ( '애니메이션 이름') == 'onAutoFillStart')

    파이어 폭스 : (! $ (이) .val () = '')의 경우

  28. 28.예를 들어 이메일을 검색하려면, 내가 노력하고 돌연변이 관찰자 "변화"일하지 둘. setInterval을 링크드 인 자동 채우기 잘 작동 (내 모든 코드를 공개하지,하지만 당신은 아이디어를 얻을) 그리고 당신이 AJAX를 느리게 여기에 추가 조건을 추가하는 경우는 백엔드와 멋진을한다. 양식 필드에 변화가 없다면 그들은 이메일을 편집 타이핑을하지 않을 것처럼 그리고는 lastEmail는 무의미 AJAX 핑을 방지 할 수 있습니다.

    예를 들어 이메일을 검색하려면, 내가 노력하고 돌연변이 관찰자 "변화"일하지 둘. setInterval을 링크드 인 자동 채우기 잘 작동 (내 모든 코드를 공개하지,하지만 당신은 아이디어를 얻을) 그리고 당신이 AJAX를 느리게 여기에 추가 조건을 추가하는 경우는 백엔드와 멋진을한다. 양식 필드에 변화가 없다면 그들은 이메일을 편집 타이핑을하지 않을 것처럼 그리고는 lastEmail는 무의미 AJAX 핑을 방지 할 수 있습니다.

    // lastEmail needs scope outside of setInterval for persistence.
var lastEmail = 'nobody';
window.setInterval(function() { // Auto-fill detection is hard.
    var theEmail = $("#email-input").val();
    if (
        ( theEmail.includes("@") ) &&
        ( theEmail != lastEmail )
    ) {
        lastEmail = theEmail;
        // Do some AJAX
    }
}, 1000); // Check the field every 1 second

  29. 29.CSS에서 시도

    CSS에서 시도

    입력 : {-webkit-자동 완성 국경 색상 : # 9B9FC4 중요한;! }

    30. from https://stackoverflow.com/questions/11708092/detecting-browser-autofill by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 이름 속성에 대괄호와 입력에 대한 jQuery를 선택  (0) 2020.09.29
[JQUERY] 트리거 JS / jQuery를에 키 누르기 /를 keyDown /의 keyup 이벤트?  (0) 2020.09.29
[JQUERY] jQuery로 비동기 이미지로드  (0) 2020.09.29
[JQUERY] jQuery를 사용하여 드롭 다운의 항목의 선택 값을 가져옵니다  (0) 2020.09.29
[JQUERY] DIV의 크기는 어떻게 변경 감지하는?  (0) 2020.09.29
,

티스토리툴바