Detectando o preenchimento automático do navegador

Como saber se um navegador preencheu automaticamente uma caixa de texto? Especialmente com caixas de nome de usuário e senha que são preenchidas automaticamente em torno do carregamento da página.

Minha primeira pergunta é quando isso ocorre na sequência de carregamento da página? É antes ou depois do document.ready?

Em segundo lugar, como posso usar a lógica para descobrir se isso ocorreu? Não é que eu queira impedir que isso ocorra, basta conectar-se ao evento. De preferência algo como isto:

if (autoFilled == true) {

} else {

}

Se possível, eu adoraria ver um jsfiddle mostrando sua resposta.

Possíveis duplicatas

Evento DOM para preenchimento automático de senha do navegador?

Eventos acionados pelo preenchimento automático do navegador e Javascript

- Essas perguntas não explicam realmente quais eventos são acionados, mas apenas reaproximam continuamente a caixa de texto (não é bom para o desempenho!).

O problema é que o preenchimento automático é tratado de maneira diferente por diferentes navegadores. Alguns despacham o evento de mudança, outros não. Portanto, é quase impossível conectar-se a um evento que é acionado quando o navegador preenche automaticamente um campo de entrada.

• Altere o acionador de eventos para diferentes navegadores:

  • Para campos de nome de usuário / senha:

    1. O Firefox 4, IE 7 e IE 8 não despacha o evento de alteração.
    2. O Safari 5 e o Chrome 9 despacham o evento de alteração.

  • Para outros campos de formulário:

    1. O IE 7 e o IE 8 não despacham o evento de alteração.
    2. O Firefox 4 despacha o evento change change quando os usuários selecionam um valor de uma lista de sugestões e saem do campo.
    3. O Chrome 9 não envia o evento de alteração.
    4. O Safari 5 despacha o evento de alteração.

As melhores opções são desabilitar o preenchimento automático de um formulário usando autocomplete="off"em seu formulário ou sondar em intervalos regulares para verificar se ele está preenchido.

Para sua pergunta sobre se é preenchido no documento ou antes dele, novamente ele varia de navegador para navegador e de versão para versão. Para campos de nome de usuário / senha apenas quando você seleciona um campo de senha de nome de usuário é preenchido. Portanto, você teria um código muito confuso se tentar se conectar a qualquer evento.

Você pode ter uma boa leitura sobre isso AQUI

Solução para navegadores WebKit

Nos documentos MDN da pseudo-classe CSS -webkit-autofill CSS:

A pseudo-classe CSS: -webkit-autofill corresponde quando um elemento tem seu valor preenchido automaticamente pelo navegador

Podemos definir uma regra css de transição nula no <input>elemento desejado , uma vez :-webkit-autofilleditado. JS será capaz de se conectar ao animationstartevento.

Créditos à equipe da interface do usuário Klarna . Veja sua boa implementação aqui:

• Regras CSS
• JS hook

Isso funciona para mim nas versões mais recentes do Firefox, Chrome e Edge:

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

Para o preenchimento automático do google chrome, funcionou para mim:

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

Caso alguém esteja procurando uma solução (como eu estava hoje), para ouvir uma alteração de preenchimento automático do navegador, aqui está um método jquery personalizado que eu construí, apenas para simplificar o processo ao adicionar um ouvinte de alteração a uma entrada:

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

Você pode chamar assim:

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

Eu estava lendo muito sobre esse problema e queria fornecer uma solução muito rápida que me ajudou.

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

onde inputBackgroundNormalStatepara o meu modelo é 'rgb (255, 255, 255)'.

Portanto, basicamente, quando os navegadores aplicam o preenchimento automático, eles tendem a indicar que a entrada é preenchida automaticamente aplicando uma cor amarela (irritante) diferente na entrada.

Editar: isso funciona para todos os navegadores

Infelizmente, a única maneira confiável que encontrei para verificar esse navegador cruzado é pesquisar a entrada. Para torná-lo responsivo, ouça também os eventos. O Chrome começou a ocultar valores de preenchimento automático do javascript, que precisa de um hack.

• Pesquisa a cada meio a terço de segundo (na maioria dos casos, não precisa ser instantâneo)
• Acione o evento de mudança usando JQuery e faça sua lógica em uma função que está ouvindo o evento de mudança.

• Adicione uma correção para os valores ocultos da senha do preenchimento automático do 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);
  });

Há um novo componente polyfill para resolver esse problema no github. Dê uma olhada no evento de preenchimento automático . Basta instalar o bower e pronto, o preenchimento automático funciona conforme o esperado.

bower install autofill-event

Minha solução:

Ouça os changeeventos como faria normalmente e, no carregamento do conteúdo do DOM, faça o seguinte:

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

Isso acionará os eventos de alteração para todos os campos que não estiverem vazios antes que o usuário tenha a chance de editá-los.

Também enfrentei o mesmo problema em que o rótulo não detectou o preenchimento automático e a animação ao mover o rótulo no preenchimento de texto estava sobreposta e essa solução funcionou para mim.

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

Eu estava procurando uma coisa semelhante. Somente Chrome ... No meu caso, a div do wrapper precisava saber se o campo de entrada foi preenchido automaticamente. Então, eu poderia fornecer CSS extra, assim como o Chrome faz no campo de entrada quando o preenche automaticamente. Ao analisar todas as respostas acima, minha solução combinada foi a seguinte:

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

O html para isso funcionar seria

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

Eu sei que esse é um tópico antigo, mas posso imaginar que muitos venham a encontrar uma solução para isso aqui.

Para fazer isso, você pode verificar se as entradas têm valores com:

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

Eu mesmo uso isso para verificar os valores no meu formulário de login quando ele é carregado para ativar o botão enviar. O código foi criado para o jQuery, mas é fácil de alterar, se necessário.

Esta é a solução para navegadores com o mecanismo de renderização do webkit . Quando o formulário é preenchido automaticamente, as entradas receberão a pseudo classe : -webkit-autofill- (por exemplo, entrada: -webkit-autofill {...}). Portanto, esse é o identificador que você deve verificar via JavaScript.

Solução com alguma forma de teste:

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

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

});

O problema quando a página é carregada é obter o valor da senha, mesmo o tamanho. Isso ocorre porque a segurança do navegador. Também o tempo limite é porque o navegador preencherá o formulário após alguma sequência de tempo.

Este código adicionará a classe auto_filled às entradas preenchidas. Além disso, tentei verificar o valor ou o comprimento da senha do tipo de entrada, mas funcionou logo após a ocorrência de algum evento na página. Então, eu tentei desencadear algum evento, mas sem sucesso. Por enquanto, esta é a minha solução. Aproveitar!

Eu tenho a solução perfeita para esta pergunta, tente este trecho de código.
A demonstração está aqui

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>

No chrome, você pode detectar campos de preenchimento automático definindo uma regra css especial para elementos preenchidos automaticamente e, em seguida, verificando com javascript se o elemento tem essa regra aplicada.

Exemplo:

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

Aqui está a solução CSS retirada da equipe da Klarna UI. Veja sua boa implementação aqui, recurso

Funciona bem para mim.

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

Eu usei esta solução para o mesmo problema.

O código HTML deve mudar para este:

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

e o código jQuery devem estar em document.ready:

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

Usei o evento de desfoque no nome de usuário para verificar se o campo pwd havia sido preenchido automaticamente.

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

Isso funciona para o IE e deve funcionar para todos os outros navegadores (verifiquei apenas o IE)

Eu tive o mesmo problema e escrevi esta solução.

Ele inicia a pesquisa em todos os campos de entrada quando a página está carregando (eu configurei 10 segundos, mas você pode ajustar esse valor).
Após 10 segundos, ele interrompe a pesquisa em todos os campos de entrada e começa a pesquisar apenas na entrada focada (se houver). Para quando você desfoca a entrada e inicia novamente se você focalizar uma.

Dessa forma, você pesquisa somente quando realmente necessário e apenas em uma entrada válida.

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

Não funciona muito bem quando você tem vários valores inseridos automaticamente, mas pode ser ajustado procurando todas as entradas no formulário atual.

Algo como:

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

Se você deseja detectar apenas se o preenchimento automático foi usado ou não, em vez de detectar exatamente quando e para qual campo o preenchimento automático foi usado, basta adicionar um elemento oculto que será preenchido automaticamente e verificar se isso contém qualquer valor. Entendo que talvez não seja isso o que muitas pessoas estão interessadas. Defina o campo de entrada com um tabIndex negativo e com coordenadas absolutas bem fora da tela. É importante que a entrada faça parte da mesma forma que o restante da entrada. Você deve usar um nome que será escolhido pelo preenchimento automático (por exemplo, "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';

Anexe esta entrada ao formulário e verifique seu valor no envio do formulário.

Há não parece ser uma solução para este que não depende de votação (pelo menos para o Chrome). É quase tão idiota, mas acho que é marginalmente melhor que a pesquisa global.

Considere o seguinte cenário:

1. O usuário começa a preencher o campo1

2. O usuário seleciona uma sugestão de preenchimento automático que preenche automaticamente os campos 2 e 3

Solução: registre um onblur em todos os campos que verifique a presença de campos preenchidos automaticamente por meio do seguinte snippet do jQuery $ (': - webkit-autofill')

Isso não será imediato, pois será adiado até que o usuário desfoque o campo1, mas não depende da pesquisa global, portanto, o IMO é uma solução melhor.

Dito isto, como pressionar a tecla Enter pode enviar um formulário, você também pode precisar de um manipulador correspondente para onkeypress.

Como alternativa, você pode usar a pesquisa global para verificar $ (': - webkit-autofill')

Pela minha experiência pessoal, o código abaixo funciona bem com o firefox IE e o safari, mas não está funcionando muito bem ao escolher o preenchimento automático no chrome.

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

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

O código abaixo funciona melhor, porque será acionado sempre que o usuário clicar no campo de entrada e, a partir daí, você poderá verificar se o campo de entrada está vazio ou não.

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

Eu consegui no chrome com:

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

Minha solução é:

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

Após a pesquisa, o problema é que os navegadores da Webkit não acionam evento de alteração no preenchimento automático. Minha solução foi obter a classe de preenchimento automático que o webkit adiciona e acionar o evento de alteração sozinho.

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

Aqui está um link para o problema no cromo. https://bugs.chromium.org/p/chromium/issues/detail?id=636425

Para detectar e-mail, por exemplo, tentei "em mudança" e um observador de mutações, nem funcionou. O setInterval funciona bem com o preenchimento automático do LinkedIn (não revelando todo o meu código, mas você entendeu a idéia) e funciona bem com o back-end se você adicionar condições extras aqui para desacelerar o AJAX. E se não houver alterações no campo do formulário, como se não estivessem digitando para editar seus emails, o lastEmail evitará pings inúteis do 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

Eu tive dificuldade em detectar o preenchimento automático no Firefox. Esta é a única solução que funcionou para mim:

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

  }); 

Para o Chrome, eu uso: if ($(this).css('animation-name') == 'onAutoFillStart')

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

tente em CSS

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