web-gelistirme-sc.com

Tarayıcı Otomatik Doldurma Tespiti

Bir tarayıcının bir metin kutusunu otomatik doldurup doldurmadığını nasıl anlarsınız? Özellikle sayfa yükünü otomatik olarak dolduran kullanıcı adı ve şifre kutuları ile.

İlk sorum, sayfa yükleme sırasında bu ne zaman gerçekleşiyor? Belgeden önce mi yoksa sonra mı?

İkincisi, bunun gerçekleşip gerçekleşmediğini anlamak için mantığı nasıl kullanabilirim? Bunun olmasını engellemek istemiyorum, sadece olaya bağlanın. Tercihen böyle bir şey:

if (autoFilled == true) {

} else {

}

Mümkünse cevabınızı gösteren bir jsfiddle görmeyi çok isterim.

Olası kopyalar

Tarayıcı şifresi otomatik doldurma için DOM etkinliği?

Tarayıcı Otomatik Doldurma ve Javascript ile tetiklenen olaylar

- Ancak, bu sorular hangi olayların tetiklendiğini gerçekten açıklamıyor, sadece metin kutusunu sürekli kontrol ediyorlar (performans için iyi değil!).

132
Undefined

Sorun otomatik doldurma farklı tarayıcılar tarafından farklı şekilde ele alınmasıdır. Bazıları change olayını gönderir, bazıları göndermez. Dolayısıyla, tarayıcı bir giriş alanını otomatik olarak tamamladığında tetiklenen bir olaya bağlanmak neredeyse imkansızdır.

  • Farklı tarayıcılar için olay tetikleyicisini değiştir:

    • Kullanıcı adı/şifre alanları için:

      1. Firefox 4, IE 7 ve IE 8 change olayını göndermiyor.
      2. Safari 5 ve Chrome 9 change olayını gönderir.
    • Diğer form alanları için:

      1. IE 7 ve IE 8 change olayını göndermiyor.
      2. Firefox 4, kullanıcılar bir öneri listesinden bir değer seçip alanın dışına çıkardığında change change olayını gönderir.
      3. Chrome 9 change olayını göndermiyor.
      4. Safari 5 change olayını gönderir.

En iyi seçenek, formunuzda autocomplete="off" kullanan bir form için otomatik tamamlamayı devre dışı bırakmak veya doldurulduğunu görmek için düzenli aralıklarla yoklama yapmaktır.

Belgenin doldurulup doldurulmadığına dair sorunuz. Zaten yine tarayıcıdan tarayıcıya ve hatta sürümden sürüme değişir. Kullanıcı adı/şifre alanları için sadece bir kullanıcı adı şifre alanı seçtiğinizde doldurulur. Öyleyse, herhangi bir olaya eklemeye çalışırsanız, çok karışık bir kodunuz olur.

Bu konuda iyi bir okuma yapabilirsiniz HERE

110
afrin216

WebKit tarayıcıları için çözüm

MDN belgelerinde : -webkit-autofill CSS sözde sınıfı: 

: -Webkit-autofill CSS sözde sınıfı, bir öğe tarayıcı tarafından otomatik olarak doldurulan değere sahip olduğunda eşleşir

İstenilen <input> öğesinde bir _id geçiş css kuralını :-webkit-autofilled olarak tanımlayabiliriz. JS daha sonra animationstart olayına bağlanabilir.

Klarna UI ekibine teşekkür ederiz. Nice uygulamalarını burada görün:

44
Lev Kazakov

Birinin bir tarayıcı arayışında olması (tıpkı bugün olduğum gibi), bir tarayıcı otomatik doldurma değişikliğini dinlemek için işte bir girişe değişiklik dinleyicisi eklerken işlemi basitleştirmek için geliştirdiğim özel bir jquery yöntemi:

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

Buna şöyle diyebilirsin:

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

Bu benim için en son Firefox, Chrome ve Edge’de çalışıyor:

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

Google chrome otomatik tamamlama için bu benim için çalıştı:

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

Ne yazık ki bu çapraz tarayıcıyı kontrol etmenin tek güvenilir yolu girişi sorgulamak. Duyarlı hale getirmek için ayrıca olayları dinleyin. Chrome, javascript'ten kesmek gerektiren otomatik doldurma değerlerini gizlemeye başladı.

  • Saniyenin yarısından üçte birine kadar her anketi yapın (Çoğu durumda anında olması gerekmez)
  • JQuery'yi kullanarak change olayını tetikleyin, ardından change olayını dinleyen bir fonksiyonda mantığınızı yapın.
  • Chrome'un gizli otomatik doldurma parola değerleri için bir düzeltme ekleyin.

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

Bu konuda çok şey okuyordum ve bana yardımcı olan çok hızlı bir geçici çözüm sağlamak istedim.

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

şablonum için inputBackgroundNormalState 'rgb (255, 255, 255)'.

Dolayısıyla, temelde tarayıcılar otomatik tamamlama uyguladığında, girişte farklı (rahatsız edici) bir sarı renk uygulayarak girişin otomatik olarak doldurulduğunu gösterme eğilimindedirler.

Düzenleme: Her tarayıcı için işe yarayacak 

7
DrNio

Bu konuyu github'da ele almak için yeni bir polyfill bileşeni var. autofill-event 'ye bir göz atın. Sadece onu güçlendirmek gerekir ve voilà, autofill beklendiği gibi çalışır.

bower install autofill-event
6
David

Benzer bir şey arıyordum. Yalnızca krom ... Benim durumumda sarmalayıcı div'in giriş alanının otomatik doldurulup doldurulmadığını bilmesi gerekiyordu. Böylece Chrome, otomatik olarak doldurduğunda giriş alanında olduğu gibi ekstra css de verebilirim. Yukarıdaki tüm cevaplara bakarak benim birleşik çözümüm şuydu:

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

Bunun çalışması için html olacaktır.

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

Çözümüm:

change olaylarını normalde yaptığınız gibi dinleyin ve DOM içerik yükünde şunu yapın:

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

Bu, kullanıcının düzenleme şansı olmadan önce boş olmayan tüm alanlardaki değişiklik olaylarını tetikler.

4
Camilo Martin

Chrome'da, otomatik doldurma alanlarını otomatik doldurulmuş öğeler için özel bir css kuralı ayarlayarak ve ardından öğede bu kuralı uyguladıktan sonra javascript ile kontrol ederek tespit edebilirsiniz.

Örnek:

CSS

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

JavaScript

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

Ben bu soru için mükemmel bir çözüm var bu kod parçacığını deneyin.
Demo burada

function ModernForm() {
    var modernInputElement = $('.js_modern_input');

    function recheckAllInput() {
        modernInputElement.each(function() {
            if ($(this).val() !== '') {
                $(this).parent().find('label').addClass('focus');
            }
        });
    }

    modernInputElement.on('click', function() {
        $(this).parent().find('label').addClass('focus');
    });
    modernInputElement.on('blur', function() {
        if ($(this).val() === '') {
            $(this).parent().find('label').removeClass('focus');
        } else {
            recheckAllInput();
        }
    });
}

ModernForm();
.form_sec {
  padding: 30px;
}
.form_sec .form_input_wrap {
  position: relative;
}
.form_sec .form_input_wrap label {
  position: absolute;
  top: 25px;
  left: 15px;
  font-size: 16px;
  font-weight: 600;
  z-index: 1;
  color: #333;
  -webkit-transition: all ease-in-out 0.35s;
  -moz-transition: all ease-in-out 0.35s;
  -ms-transition: all ease-in-out 0.35s;
  -o-transition: all ease-in-out 0.35s;
  transition: all ease-in-out 0.35s;
}
.form_sec .form_input_wrap label.focus {
  top: 5px;
  color: #a7a9ab;
  font-weight: 300;
  -webkit-transition: all ease-in-out 0.35s;
  -moz-transition: all ease-in-out 0.35s;
  -ms-transition: all ease-in-out 0.35s;
  -o-transition: all ease-in-out 0.35s;
  transition: all ease-in-out 0.35s;
}
.form_sec .form_input {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border: none;
  border-bottom: 2px solid #d3d4d5;
  padding: 30px 0 5px 0;
  outline: none;
}
.form_sec .form_input.err {
  border-bottom-color: #888;
}
.form_sec .cta_login {
  border: 1px solid #ec1940;
  border-radius: 2px;
  background-color: #ec1940;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  padding: 15px 40px;
  margin-top: 30px;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form_sec">
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                Full Name
            </label>
            <input type="text" name="name" id="name" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group form_input_wrap col-lg-6 col-md-6">
            <label>
                Emaill
            </label>
            <input type="email" name="email" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group form_input_wrap col-lg-12 col-md-12">
            <label>
                Address Line 1
            </label>
            <input type="text" name="address" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                City
            </label>
            <input type="text" name="city" class="form_input js_modern_input">
        </div>
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                State
            </label>
            <input type="text" name="state" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row clearfix">
        <div class="form-group col-lg-6 col-md-6 form_input_wrap">
            <label>
                Country
            </label>
            <input type="text" name="country" class="form_input js_modern_input">
        </div>
        <div class="form-group col-lg-4 col-md-4 form_input_wrap">
            <label>
                Pin
            </label>
            <input type="text" name="pincode" class="form_input js_modern_input">
        </div>
    </div>
    <div class="row cta_sec">
        <div class="col-lg-12">
            <button type="submit" class="cta_login">Submit</button>
        </div>
    </div>
</form>

2
Suresh Pattu

Bu çözümü aynı problem için kullandım.

HTML kodu şöyle değişmeli: 

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

ve jQuery kodu document.ready içinde olmalıdır:

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

Bunun eski bir konu olduğunu biliyorum, ancak bunun için bir çözüm bulmaya geldiğini hayal edebiliyorum.

Bunu yapmak için, giriş (ler) in değerinin olup olmadığını kontrol edebilirsiniz:

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

Giriş formumdaki değerleri, gönder düğmesini etkinleştirmek için yüklendiğinde kontrol etmek için kendim kullanıyorum ..

1
S.Lund

Aynı zamanda, etiketin otomatik doldurmayı algılamadığı ve etiket doldurma metni için animasyonun üst üste geldiği aynı problemle karşılaştım ve bu çözüm benim için çalıştı.

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

Aynı sorunu yaşadım ve bu çözümü yazdım.

Sayfa yüklenirken her giriş alanında yoklama başlar (10 saniye ayarladım ancak bu değeri ayarlayabilirsiniz).
10 saniye sonra, her giriş alanına oylamayı durdurur ve yalnızca odaklanan girdiye oylamayı başlatır (eğer varsa).

Bu şekilde, yalnızca gerçekten ihtiyaç duyulduğunda ve yalnızca geçerli bir girdiyle anket yaparsınız.

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

Otomatik olarak yerleştirilmiş birden fazla değeriniz olduğunda oldukça iyi çalışmaz, ancak mevcut formdaki her girişi aramak için ince ayar yapılabilir.

Gibi bir şey:

// 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);
});
0
Fez Vrasta

Kişisel deneyimlerime göre, aşağıdaki kod firefox IE ve safari ile iyi çalışıyor ancak kromda otomatik tamamlama seçiminde çok iyi çalışmıyor.

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

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

Aşağıdaki kod daha iyi çalışır, çünkü kullanıcı giriş alanına tıkladığında her seferinde tetikleyecektir ve oradan giriş alanının boş olup olmadığını kontrol edebilirsiniz. 

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

Benim çözümüm:

    $.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');
          }
      );
  });
0
Romick

Araştırmadan sonra sorun şu ki, webkit tarayıcıları otomatik tamamlamada değişiklik etkinliği başlatmazlar. Benim çözümüm, webkit'in eklediği otomatik doldurma sınıfını almak ve değişiklik olayını kendim tetiklemekti.

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

İşte kromdaki sayı için bir link. https://bugs.chromium.org/p/chromium/issues/detail?id=636425

0
Cvetan Himchev

Tam olarak ne zaman ve hangi alanda otomatik doldurmanın kullanıldığını saptamak yerine, yalnızca otomatik doldurmanın kullanılıp kullanılmadığını saptamak istiyorsanız, otomatik olarak doldurulacak gizli bir öğe ekleyebilir ve ardından denetleyip herhangi bir değer içeriyor. Bunun birçok insanın ilgisini çekmeyebileceğini anlıyorum. Girdi alanını negatif tabIndex ile ve mutlak koordinatlarla ekranın dışına ayarlayın. Girişin, girişin geri kalanıyla aynı formda olması önemlidir. Otomatik doldurma tarafından alınacak bir ad kullanmanız gerekir (ör. "İkinci ad").

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

Bu girişi forma ekleyin ve form tesliminde değerini kontrol edin.

0
bornSwift

Chrome'da şunu başardım:

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

Pwd alanının otomatik olarak doldurulup doldurulmadığını kontrol etmek için kullanıcı adındaki blur olayını kullandım.

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

Bu IE için çalışır ve diğer tüm tarayıcılar için çalışmalıdır (Yalnızca IE’yi kontrol ettim)

0

Bu, webkit render engine ..__ işlevine sahip tarayıcılar için bir çözümdür.F form otomatik olarak doldurulduğunda, girişler sözde sınıf: -webkit-autofill- (fe input: -webkit-autofill {.. .}). Yani bu, JavaScript ile kontrol etmeniz gereken tanımlayıcıdır.

Bazı test formları ile çözüm:

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

Ve javascript:

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

});

Sayfanın yüklenmesinde sorun şifre uzunluğu, hatta uzunluğu olsun. Bunun nedeni tarayıcının güvenliği. Ayrıca timeout , bunun nedeni tarayıcının bir süre sonra form doldurmasıdır. 

Bu kod doldurulmuş girdilere auto_filled sınıfını ekler. Ayrıca, giriş tipi parola değerini veya uzunluğunu kontrol etmeye çalıştım, ancak sayfadaki bir olaydan hemen sonra çalıştı. Bu yüzden bazı olayları tetiklemeye çalıştım, ama başarılı olamadım. Şimdilik bu benim çözümüm . 

0
Adam Šipický

İşte Klarna UI ekibinden alınan CSS çözümü. Nice uygulamalarını burada görün kaynak

Benim için iyi çalışıyor.

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

Var yok yoklamaya dayanmayan bir çözüm gibi görünüyor (en azından Chrome için). Neredeyse hackish, ama bence küresel yoklamadan marjinal olarak daha iyi.

Aşağıdaki senaryoyu inceleyin:

  1. Kullanıcı alan1 doldurmaya başlar

  2. Kullanıcı, field2 ve field3'ü otomatik olarak dolduran bir otomatik tamamlama önerisi seçer

Çözüm: Aşağıdaki jQuery snippet $ (': - webkit-autofill') aracılığıyla otomatik doldurulmuş alanların varlığını kontrol eden tüm alanlara bir kayıt ekleyin.

Bu, kullanıcı alanını bulanıklaştırıncaya kadar erteleneceği için hemen gerçekleşmeyecektir, ancak küresel yoklamaya dayanmaz, bu nedenle IMO, daha iyi bir çözümdür.

Bununla birlikte, enter tuşuna basıldığında bir form gönderilebileceği için, onkeypress için karşılık gelen bir işleyiciye de ihtiyacınız olabilir.

Alternatif olarak, $ (': - webkit-autofill') kontrol etmek için genel yoklama kullanabilirsiniz.

0
Dan D