Mendeteksi IsiOtomatis Browser

Bagaimana Anda tahu jika browser telah secara otomatis mengisi kotak teks? Terutama dengan kotak nama pengguna & kata sandi yang mengisi secara otomatis di sekitar pemuatan halaman.

Pertanyaan pertama saya adalah kapan ini terjadi dalam urutan pemuatan halaman? Apakah sebelum atau sesudah dokumen. Sudah?

Kedua, bagaimana saya bisa menggunakan logika untuk mengetahui apakah ini terjadi? Bukannya saya ingin menghentikan ini terjadi, cukup masukkan ke dalam acara. Lebih disukai sesuatu seperti ini:

if (autoFilled == true) {

} else {

}

Jika memungkinkan saya akan senang melihat jsfiddle menunjukkan jawaban Anda.

Kemungkinan duplikat

Acara DOM untuk isi ulang kata sandi browser?

IsiOtomatis Browser dan Javascript memicu kejadian

--Keduanya pertanyaan ini tidak benar-benar menjelaskan peristiwa apa yang dipicu, mereka hanya terus memeriksa ulang kotak teks (tidak baik untuk kinerja!).

Masalahnya adalah pengisianotomatis ditangani secara berbeda oleh browser yang berbeda. Beberapa mengirimkan perubahan acara, beberapa tidak. Jadi, hampir tidak mungkin untuk menghubungkan ke suatu peristiwa yang dipicu ketika browser secara otomatis melengkapi bidang input.

• Ubah pemicu acara untuk berbagai browser:

  • Untuk bidang nama pengguna / kata sandi:

    1. Firefox 4, IE 7, dan IE 8 tidak mengirimkan perubahan acara.
    2. Safari 5 dan Chrome 9 melakukan pengiriman acara perubahan.

  • Untuk bidang formulir lainnya:

    1. IE 7 dan IE 8 tidak mengirimkan perubahan acara.
    2. Firefox 4 tidak mengirimkan perubahan acara ketika pengguna memilih nilai dari daftar saran dan tab keluar dari bidang.
    3. Chrome 9 tidak mengirimkan acara perubahan.
    4. Safari 5 mengirimkan perubahan acara.

Pilihan terbaik Anda adalah menonaktifkan pelengkapan otomatis untuk formulir yang menggunakan autocomplete="off"formulir atau jajak pendapat secara berkala untuk melihat apakah isinya diisi.

Untuk pertanyaan Anda apakah diisi atau sebelum dokumen. Lagi-lagi ini bervariasi dari browser ke browser dan bahkan versi ke versi. Untuk bidang nama pengguna / kata sandi hanya ketika Anda memilih bidang kata sandi nama pengguna diisi. Jadi secara keseluruhan Anda akan memiliki kode yang sangat berantakan jika Anda mencoba melampirkan ke acara apa pun.

Anda dapat membaca dengan baik di SINI

Solusi untuk browser WebKit

Dari dokumen MDN untuk : -webkit-autofill CSS pseudo-class:

The: -webkit-autofill CSS pseudo-class cocok ketika suatu elemen memiliki nilainya autofilled oleh browser

Kita dapat mendefinisikan aturan css transisi batal pada <input>elemen yang diinginkan setelah :-webkit-autofilldiedit. JS kemudian dapat terhubung ke animationstartacara tersebut.

Penghargaan untuk tim Klarna UI . Lihat penerapannya yang bagus di sini:

• Aturan CSS
• Kait JS

Ini berfungsi untuk saya di Firefox, Chrome, dan Edge terbaru:

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

Untuk Google chrome autocomplete, ini bekerja untuk saya:

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

Untuk berjaga-jaga seandainya seseorang mencari solusi (seperti saya hari ini), untuk mendengarkan perubahan isi ulang peramban, inilah metode jquery khusus yang saya buat, hanya untuk menyederhanakan proses saat menambahkan pendengar perubahan ke input:

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

Anda bisa menyebutnya seperti ini:

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

Saya banyak membaca tentang masalah ini dan ingin memberikan solusi cepat yang membantu saya.

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

tempat inputBackgroundNormalStatetemplat saya adalah 'rgb (255, 255, 255)'.

Jadi pada dasarnya ketika browser menerapkan pelengkapan otomatis, mereka cenderung menunjukkan bahwa input diisi otomatis dengan menerapkan warna kuning (mengganggu) yang berbeda pada input.

Sunting: ini berfungsi untuk setiap browser

Sayangnya satu-satunya cara andal yang saya temukan untuk memeriksa peramban silang ini adalah polling input. Untuk membuatnya responsif juga dengarkan acara. Chrome telah mulai menyembunyikan nilai pengisian otomatis dari javascript yang membutuhkan peretasan.

• Polling setiap setengah hingga sepertiga detik (Tidak perlu instan dalam banyak kasus)
• Trigger acara perubahan menggunakan JQuery kemudian lakukan logika Anda dalam fungsi mendengarkan acara perubahan.

• Tambahkan perbaikan untuk nilai kata sandi IsiOtomatis tersembunyi 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);
  });

Ada komponen polyfill baru untuk mengatasi masalah ini di github. Lihat acara autofill . Hanya perlu memasang dan menginstalnya, autofill berfungsi seperti yang diharapkan.

bower install autofill-event

Solusi saya:

Dengarkan changeacara seperti biasa, dan pada konten DOM, lakukan ini:

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

Ini akan memecat acara perubahan untuk semua bidang yang tidak kosong sebelum pengguna memiliki kesempatan untuk mengeditnya.

Saya juga menghadapi masalah yang sama di mana label tidak mendeteksi pengisian otomatis dan animasi untuk memindahkan label pada pengisian teks tumpang tindih dan solusi ini berhasil untuk saya.

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

Saya sedang mencari hal serupa. Khusus Chrome ... Dalam kasus saya, pembungkus div perlu tahu apakah bidang input diisi otomatis. Jadi saya bisa memberikan css tambahan seperti yang dilakukan Chrome pada bidang input saat diisi otomatis. Dengan melihat semua jawaban di atas, solusi gabungan saya adalah sebagai berikut:

/* 
 * 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 agar ini berfungsi adalah

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

Saya tahu ini adalah utas lama tetapi saya dapat membayangkan banyak yang datang untuk menemukan solusi untuk ini di sini.

Untuk melakukan ini, Anda dapat memeriksa apakah input memiliki nilai dengan:

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

Saya menggunakan ini sendiri untuk memeriksa nilai-nilai dalam formulir login saya ketika dimuat untuk mengaktifkan tombol kirim. Kode ini dibuat untuk jQuery tetapi mudah diubah jika diperlukan.

Ini adalah solusi untuk peramban dengan mesin render webkit . Ketika formulir diisi otomatis, input akan mendapatkan kelas semu : -webkit-autofill- (input fe: -webkit-autofill {...}). Jadi ini adalah pengidentifikasi apa yang harus Anda periksa melalui JavaScript.

Solusi dengan beberapa bentuk tes:

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

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

});

Masalah saat halaman dibuka adalah mendapatkan nilai kata sandi, bahkan panjangnya. Ini karena keamanan browser. Juga batas waktu , itu karena browser akan mengisi formulir setelah beberapa urutan waktu.

Kode ini akan menambahkan kelas auto_filled ke input yang diisi. Juga, saya mencoba memeriksa nilai kata sandi jenis input, atau panjangnya, tetapi itu berhasil setelah beberapa peristiwa pada halaman tersebut terjadi. Jadi saya mencoba memicu beberapa acara, tetapi tidak berhasil. Untuk sekarang ini solusi saya. Nikmati!

Saya punya solusi sempurna untuk pertanyaan ini, coba cuplikan kode ini.
Demo ada di sini

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>

Pada chrome, Anda dapat mendeteksi bidang isian otomatis dengan menyetel aturan css khusus untuk elemen isian otomatis, dan kemudian mengeceknya dengan javascript jika elemen tersebut menerapkan aturan itu.

Contoh:

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

Berikut adalah solusi CSS yang diambil dari tim Klarna UI. Lihat implementasi bagus mereka di sini sumber daya

Bekerja dengan baik untuk saya.

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

Saya menggunakan solusi ini untuk masalah yang sama.

Kode HTML harus berubah menjadi ini:

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

dan kode jQuery harus dalam document.ready:

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

Saya menggunakan acara blur pada nama pengguna untuk memeriksa apakah bidang pwd telah terisi otomatis.

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

Ini berfungsi untuk IE, dan seharusnya bekerja untuk semua browser lain (saya baru memeriksa IE)

Saya memiliki masalah yang sama dan saya telah menulis solusi ini.

Itu mulai polling pada setiap bidang input ketika halaman sedang memuat (saya telah menetapkan 10 detik tetapi Anda dapat menyetel nilai ini).
Setelah 10 detik berhenti jajak pendapat pada setiap bidang input dan mulai jajak pendapat hanya pada input fokus (jika ada). Itu berhenti ketika Anda mengaburkan input dan mulai lagi jika Anda memfokuskan satu.

Dengan cara ini Anda polling hanya ketika benar-benar dibutuhkan dan hanya pada input yang valid.

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

Ini tidak berfungsi dengan baik ketika Anda memiliki beberapa nilai yang dimasukkan secara otomatis, tetapi bisa di-tweak mencari setiap input pada formulir saat ini.

Sesuatu seperti:

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

Jika Anda hanya ingin mendeteksi apakah pengisian otomatis telah digunakan atau tidak, daripada mendeteksi kapan dan ke mana bidang pengisian otomatis telah digunakan, Anda cukup menambahkan elemen tersembunyi yang akan diisi otomatis dan kemudian memeriksa apakah ini mengandung nilai apa saja. Saya mengerti bahwa ini mungkin bukan hal yang diminati banyak orang. Setel field input dengan tabIndex negatif dan dengan koordinat absolut dari layar. Penting bahwa input adalah bagian dari bentuk yang sama dengan sisa input. Anda harus menggunakan nama yang akan diambil oleh IsiOtomatis (mis. "Nama kedua").

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

Tambahkan input ini ke formulir dan periksa nilainya pada formulir kirim.

Ada tidak muncul untuk menjadi solusi untuk ini yang tidak bergantung pada polling (setidaknya untuk Chrome). Ini hampir sama hackish, tapi saya pikir sedikit lebih baik daripada polling global.

Pertimbangkan skenario berikut:

1. Pengguna mulai mengisi bidang1

2. Pengguna memilih saran pelengkapan otomatis yang isian isian isian2 dan isian3

Solusi: Daftarkan onblur pada semua bidang yang memeriksa keberadaan bidang isian otomatis melalui cuplikan $ jQuery berikut (': - webkit-autofill')

Ini tidak akan langsung karena akan ditunda sampai pengguna mengaburkan bidang1 tetapi tidak bergantung pada jajak pendapat global sehingga IMO, ini adalah solusi yang lebih baik.

Yang mengatakan, karena menekan tombol enter dapat mengirimkan formulir, Anda juga mungkin memerlukan penangan yang sesuai untuk onkeypress.

Sebagai alternatif, Anda dapat menggunakan polling global untuk memeriksa $ (': - webkit-autofill')

Dari pengalaman pribadi saya, kode di bawah ini berfungsi dengan baik dengan firefox IE dan safari, tetapi tidak berfungsi dengan baik dalam memilih pelengkapan otomatis di chrome.

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

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

Kode di bawah ini berfungsi lebih baik, karena akan memicu setiap kali pengguna mengklik bidang input dan dari sana Anda dapat memeriksa apakah bidang input kosong atau tidak.

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

Saya berhasil menggunakan chrome dengan:

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

Solusi saya adalah:

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

Setelah meneliti masalahnya adalah bahwa browser webkit tidak memecat acara perubahan pada pelengkapan otomatis. Solusi saya adalah mendapatkan kelas IsiOtomatis yang ditambahkan oleh webkit dan memicu perubahan acara sendiri.

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

Berikut ini tautan untuk masalah dalam kromium. https://bugs.chromium.org/p/chromium/issues/detail?id=636425

Untuk mendeteksi email misalnya, saya mencoba "saat perubahan" dan seorang pengamat mutasi, tidak berhasil. setInterval bekerja dengan baik dengan pengisian otomatis LinkedIn (tidak mengungkapkan semua kode saya, tetapi Anda mendapatkan idenya) dan ini cocok dengan backend jika Anda menambahkan kondisi tambahan di sini untuk memperlambat AJAX. Dan jika tidak ada perubahan di bidang formulir, seperti mereka tidak mengetik untuk mengedit email mereka, lastEmail mencegah ping AJAX yang tidak berguna.

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

Saya kesulitan mendeteksi pengisian otomatis di Firefox. Ini adalah satu-satunya solusi yang bekerja untuk saya:

Demo

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

  }); 

Untuk Chrome saya menggunakan: if ($(this).css('animation-name') == 'onAutoFillStart')

Untuk Firefox: if ($(this).val() != '')

coba di CSS

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