Tarayıcı Otomatik Doldurmayı Tespit Etme

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

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

İkincisi, bunun olup olmadığını öğrenmek için mantığı nasıl kullanabilirim? Bu değil, bu meydana gelmesini durdurmak istiyorum, sadece olaya kanca. Tercihen böyle bir şey:

if (autoFilled == true) {

} else {

}

Mümkünse cevabınızı gösteren bir jsfiddle görmek isterim.

Olası kopyalar

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

Tarayıcı Otomatik Doldurma ve Javascript tarafından tetiklenen etkinlikler

Her iki soru da hangi olayların tetiklendiğini açıklamıyor, sadece metin kutusunu sürekli olarak yeniden kontrol ediyorlar (performans için iyi değil!).

Sorun, otomatik doldurmanın farklı tarayıcılar tarafından farklı şekilde ele alınmasıdır. Bazıları change olayını gönderir, bazıları göndermez. Bu nedenle, 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 etkinlik tetikleyicisini değiştirme:

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

    1. Firefox 4, IE 7 ve IE 8, change olayını göndermez.
    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öndermez.
    2. Firefox 4, kullanıcılar bir öneri listesinden bir değer seçip alan dışına çıkınca değişiklik değişikliği olayı gönderir.
    3. Chrome 9, change olayını göndermez.
    4. Safari 5, change olayını gönderir.

En iyi seçenekler, formunuzda kullanarak bir form için otomatik tamamlamayı devre dışı bırakmak autocomplete="off"veya düzenli aralıklarla doldurmak için doldurulup doldurulmadığını görmek.

Belgede veya belgede önceden doldurulup doldurulmadığı hakkında sorunuz için. Tarayıcıdan tarayıcıya ve hatta versiyondan versiyona değişir. Kullanıcı adı / şifre alanları için yalnızca bir kullanıcı adı şifre alanı seçtiğinizde doldurulur. Bu yüzden, herhangi bir etkinliğe eklemeye çalışırsanız çok karışık bir kodunuz olur.

BURADA iyi bir okuma yapabilirsiniz

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

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

: -Webkit-autofill CSS sözde sınıfı, bir öğenin değeri tarayıcı tarafından otomatik olarak doldurulduğunda eşleşir

Edildikten sonra istenen eleman üzerinde bir geçersiz geçiş css kuralı tanımlayabiliriz . JS daha sonra etkinliğe bağlanabilecektir.<input>:-webkit-autofillanimationstart

Klarna UI ekibine verilen krediler . Onların güzel uygulamalarını burada görebilirsiniz:

• CSS kuralları
• JS kancası

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

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

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
}

Birisinin bir çözüm araması durumunda (tıpkı bugün olduğum gibi), bir tarayıcı otomatik doldurma değişikliğini dinlemek için, bir girdiye bir değişiklik dinleyicisi eklerken işlemi basitleştirmek için oluşturduğum ö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 diyebilirsiniz:

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

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

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

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

Dolayısıyla, tarayıcılar otomatik tamamlama uyguladığında, girdiye farklı (can sıkıcı) sarı bir renk uygulayarak girdinin otomatik olarak doldurulduğunu gösterirler.

Düzenle: bu her tarayıcı için çalışır

Ne yazık ki bu çapraz tarayıcı kontrol etmek için bulduk tek güvenilir yolu giriş anket etmektir. Duyarlı hale getirmek için olayları da dinleyin. Chrome, bir kesmek isteyen javascript'ten otomatik doldurma değerlerini gizlemeye başladı.

• Saniyenin her yarısında üçte bir yoklama (Çoğu durumda anında olması gerekmez)
• Değişiklik olayını JQuery kullanarak tetikleyin, ardından mantığınızı change olayını dinleyen bir işlevde yapın.

• Chrome gizli otomatik doldurma şifre 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);
  });

Github'da bu sorunu çözmek için yeni bir çoklu dolgu bileşeni var. Otomatik doldurma etkinliğine bir göz atın . Sadece yüklemeyi ve voilà'yı güçlendirmeniz gerekiyor, otomatik doldurma beklendiği gibi çalışıyor.

bower install autofill-event

Çözümüm:

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

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

Bu, kullanıcının bunları düzenleme şansı olmadan boş olmayan tüm alanlar için değişiklik olaylarını tetikler.

Etiketin otomatik doldurmayı algılamaması ve metni doldurmak için etiketi taşımak için animasyonun çakıştığı ve bu çözümün benim için çalıştığı aynı sorunla da karşılaştım.

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

Benzer bir şey arıyordum. Yalnızca Chrome ... Benim durumumda sarmalayıcı div'ın giriş alanının otomatik olarak doldurulup doldurulmadığını bilmesi gerekiyordu. Böylece, tıpkı otomatik olarak doldurduğunda Chrome'un giriş alanında yaptığı gibi ekstra css verebilirim. Kombine çözümümün üstündeki tüm cevaplara bakarak aşağıdakiler vardı:

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

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

Bu eski bir iplik olduğunu biliyorum ama birçok burada bu bir çözüm bulmak için geliyor hayal edebiliyorum.

Bunu yapmak için, girişlerin aşağıdaki değerlere sahip olup olmadığını kontrol edebilirsiniz:

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

Gönder düğmesini etkinleştirmek için yüklendiğinde giriş formumdaki değerleri kontrol etmek için bunu kendim kullanıyorum. Kod jQuery için yapılır, ancak gerekirse değiştirilmesi kolaydır.

Bu webkit render motoru olan tarayıcılar için bir çözümdür . Form otomatik olarak doldurulduğunda , girişler sözde sınıf alır : -webkit-autofill- (fe input: -webkit-autofill {...}). Bu, JavaScript aracılığıyla kontrol etmeniz gereken tanımlayıcıdır.

Bazı test formlarıyla çö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);

});

Sayfa yüklendiğinde sorun parola değeri, hatta uzunluk olsun. Bunun nedeni tarayıcının güvenliği. Ayrıca zaman aşımı , çünkü tarayıcı bir süre sonra formu dolduracaktır.

Bu kod doldurulmuş girişlere auto_filled sınıfını ekleyecektir . Ayrıca, giriş türü şifre değerini veya uzunluğunu kontrol etmeye çalıştım, ancak sayfadaki bir olaydan hemen sonra çalıştı. Bu yüzden bir olayı tetiklemeye çalıştım, ama başarılı olamadım. Şimdilik bu benim çözümüm. Zevk almak!

Bu kod snippet'i deneyin bu soru için mükemmel bir çözüm var.
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>

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

Misal:

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

İşte Klarna UI ekibinden alınan CSS çözümü. Güzel uygulamalarını burada görebilirsiniz 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;
}

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

HTML kodu şu şekilde değişmelidir:

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

ve jQuery kodu şurada olmalıdır document.ready:

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

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ılarda çalışmalıdır (sadece IE'yi kontrol ettim)

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

Sayfa yüklenirken her giriş alanında sorgulamaya başlar (10 saniye ayarladım ancak bu değeri ayarlayabilirsiniz).
10 saniye sonra her giriş alanında yoklamayı durdurur ve yalnızca odaklanmış girişte (varsa) yoklamaya başlar. Girişi bulanıklaştırdığınızda durur ve odaklanırsanız tekrar başlar.

Bu şekilde yalnızca gerçekten ihtiyaç duyulduğunda ve yalnızca geçerli bir girdide 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 birden çok değer eklediğinizde oldukça iyi çalışmaz, ancak geçerli formdaki her girdiyi ararken ayarlanmış olabilir.

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

Otomatik dolgunun kullanılıp kullanılmadığını tespit etmek istiyorsanız, otomatik dolgunun ne zaman ve hangi alanda kullanıldığını tespit etmek yerine, otomatik olarak doldurulacak gizli bir eleman ekleyebilir ve ardından bunun herhangi bir değer içeriyor. Bunun birçok insanın ilgilendiği bir şey olmadığını anlıyorum. Giriş alanını negatif bir tabIndex ve ekranın mutlak koordinatları ile ayarlayın. Girişin, girişin geri kalanıyla aynı formun bir parçası olması önemlidir. Otomatik Doldurma tarafından alınacak bir ad kullanmalısınız (ö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 girdiyi forma ekleyin ve form gönderildiğinde değerini kontrol edin.

Sorgulamaya dayanmayan bir çözüm var gibi görünüyor (en azından Chrome için). Neredeyse hackish gibi, ama küresel yoklamadan çok az daha iyi olduğunu düşünüyorum.

Aşağıdaki senaryoyu düşünün:

1. Kullanıcı alanı doldurmaya başlar1

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

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

Kullanıcı alan1'i bulanıklaşana kadar erteleneceğinden bu hemen gerçekleşmeyecektir, ancak global yoklamaya bağlı olmadığından IMO, daha iyi bir çözümdür.

Bununla birlikte, enter tuşuna basmak bir form gönderebildiğinden, onkeypress için ilgili bir işleyiciye de ihtiyacınız olabilir.

Alternatif olarak, $ (': - webkit-autofill') öğesini kontrol etmek için global yoklamayı kullanabilirsiniz

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ını her tıkladığında tetiklenir ve oradan giriş alanının boş olup olmadığını kontrol edebilirsiniz.

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

Krom ile başardım:

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

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

Araştırmadan sonra sorun, webkit tarayıcılarının otomatik tamamlamada değişiklik olayını başlatmamasıdır. Benim çözümüm, webkit'in eklediği otomatik doldurma sınıfını almak ve kendi kendime değişiklik olayını tetiklemekti.

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

İşte kromdaki sorunun bir bağlantısı. https://bugs.chromium.org/p/chromium/issues/detail?id=636425

Örneğin e-postayı tespit etmek için, "değişimde" denedim ve bir mutasyon gözlemcisi de işe yaramadı. setInterval, LinkedIn otomatik doldurma özelliğiyle iyi çalışır (tüm kodumu açığa çıkarmaz, ancak fikri anlarsınız) ve AJAX'ı yavaşlatmak için buraya ekstra koşullar eklerseniz arka uçla iyi oynar. Ve form alanında herhangi bir değişiklik yoksa, e-postalarını düzenlemek için yazmıyormuş gibi, lastEmail anlamsız AJAX pinglerini önler.

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

Firefox'ta otomatik doldurmayı tespit etmekte zorlandım. Benim için işe yarayan tek çözüm bu:

gösteri

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

JavaScript:

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

  }); 

Chrome için şunu kullanıyorum: if ($(this).css('animation-name') == 'onAutoFillStart')

Firefox için: if ($(this).val() != '')

CSS'de dene

input:-webkit-autofill { border-color: #9B9FC4 !important; }