Cum iti dai seama daca un browser nu are completate automat un text-box? Mai ales cu numele de utilizator & parola cutii de completare automată în jurul valorii de încărcare a paginii.
Prima mea întrebare este când se produce acest lucru în pagina de încărcare secvență? Este înainte sau după document.gata?
În al doilea rând cum pot folosi logica pentru a afla dacă acest lucru a avut loc? Nu că vreau să opresc acest lucru de la care apar, trebuie doar să cârlig în eveniment. Preferabil ceva de genul asta:
if (autoFilled == true) {
} else {
}
Dacă este posibil, mi-ar plăcea să văd un jsfiddle arată răspunsul.
Posibile duplicate
https://stackoverflow.com/questions/3535738/dom-event-for-browser-password-autofill
https://stackoverflow.com/questions/4938242/browser-autofill-and-javascript-triggered-events
Problema este autofill este tratată în mod diferit de către diferite browsere. Unele expediere schimbarea eveniment, don't. Deci, este aproape imposibil de prins pe un eveniment care se declanșează atunci când browser-ul se completează automat un câmp de intrare.
Cele mai bune opțiuni sunt să fie dezactiva completarea automată pentru un formular folosind `autocomplete="off" in forma sau sondaj de opinie, la intervale regulate, pentru a vedea dacă își umplut.
Pentru întrebarea dvs. dacă acesta este umplut la sau înainte de document.gata din nou variază de la browser la browser-ul și chiar o versiune la alta. Pentru numele de utilizator/parola domenii numai atunci când selectați un nume de utilizator parola câmp este umplut. Deci, în total, ar fi un foarte murdar cod, dacă încercați să atașați la orice eveniment.
Puteți fi un bun citit pe acest AICI
Din MDN docs pentru :-webkit-automată CSS pseudo-clasa:
:- webkit-automată CSS pseudo-clasa meciuri când o <input> element are valoarea sa autofilled de browser-ul
Putem defini un void trecerea css pronunțe asupra dorit <input> element odată ce este
:-webkit-automată a ' ed. JS apoi va fi capabil de a prinde pe animationstart
eveniment.
Credite Klarna UI echipa. Își văd frumos în aplicare aici:
Doar în cazul în care cineva este în căutarea pentru o soluție (la fel cum am fost astăzi), pentru a asculta un browser automată a schimba, aici's un jquery personalizate metoda pe care am'am construit, doar pentru a simplifica procesul, atunci când adăugarea de o schimbare ascultător la intrare:
$.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);
};
Puteți să-l numesc astfel:
$("#myInput").allchange(function () {
alert("change!");
});
Am citit multe despre această problemă și a vrut să ofere o soluție rapidă, care m-a ajutat.
let style = window.getComputedStyle(document.getElementById('email'))
if (style && style.backgroundColor !== inputBackgroundNormalState) {
this.inputAutofilledByBrowser = true
}
unde inputBackgroundNormalState pentru șablon mea este 'rgb(255, 255, 255)'.
Deci, practic, atunci când browsere se aplică automată ele tind să indice că intrarea este autofilled prin aplicarea unei diferite (enervant) de culoare galbenă pe intrare.
Edit : aceasta funcționează pentru fiecare browser
Din păcate, singura modalitate de încredere pentru a verifica acest browser-ul cruce este pentru sondajul de intrare. Pentru a face receptiv, de asemenea, asculta la evenimente. Chrome a început să mă ascund umple automat valorile de javascript care are nevoie de un hack.
$(document).ready(function () { $('#inputID').schimba(YOURFUNCTIONNAME); $('#inputID').apăsare de tastă(YOURFUNCTIONNAME); $('#inputID').keyup(YOURFUNCTIONNAME); $('#inputID').blur(YOURFUNCTIONNAME); $('#inputID').focusin(YOURFUNCTIONNAME); $('#inputID').focusout(YOURFUNCTIONNAME); $('#inputID').pe('de intrare', YOURFUNCTIONNAME); $('#inputID').pe('textInput', YOURFUNCTIONNAME); $('#inputID').pe('reseta', YOURFUNCTIONNAME);
fereastra.setInterval(function() { var hasValue = $("#inputID").val().lungime > 0;//Normal dacă(!hasValue){ hasValue = $("#inputID:-webkit-automată").lungime > 0;//Chrome }
dacă (hasValue) { $('#inputID').trigger('schimba'); } }, 333); });
Există un nou polyfill componentă a aborda această problemă pe github. Avea o privire de la autofill-eveniment. Trebuie doar să bower instalați-l și voilà, completare automată funcționează cum era de așteptat.
bower install autofill-event
Soluția mea:
Asculta "schimbare" evenimente cum ați face în mod normal, și pe DOM încărcare de conținut, face acest lucru:
setTimeout(function() {
$('input').each(function() {
var elem = $(this);
if (elem.val()) elem.change();
})
}, 250);
Acest lucru va declanșa schimbarea evenimente pentru toate domeniile care nu sunt't gol înainte ca utilizatorul a avut o șansă de a le edita.
Am fost în căutarea pentru un lucru similar. Chrome doar... In cazul meu înveliș div nevoie să știu dacă câmpul de introducere a fost autofilled. Așa că am putea da extra css la fel ca Chrome nu pe câmpul de intrare atunci când autofills. Uitandu-se la toate răspunsurile de mai sus mi soluție combinată fost următoarele:
/*
* 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);
Codul html pentru acest lucru ar fi
<div class="input-wrapper">
<input type="text" name="firstname">
</div>
M-am confruntat cu aceeași problemă în cazul în care eticheta nu a detectat completare automată și de animație pentru a muta eticheta de pe umplere text a fost suprapuse și această soluție a lucrat pentru mine.
input:-webkit-autofill ~ label {
top:-20px;
}
Aici este CSS soluție luată de Klarna UI echipa. Își văd frumos în aplicare aici resurse
Funcționează bine pentru mine.
input:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
}
Stiu ca e un thread vechi dar îmi pot imagina că mulți vorba de a găsi o soluție pentru acest lucru aici.
Pentru a face acest lucru, puteți verifica dacă intrarea(s) are valoarea(s) cu:
$(function() {
setTimeout(function() {
if ($("#inputID").val().length > 0) {
// YOUR CODE
}
}, 100);
});
Eu folosesc acest lucru eu însumi pentru a verifica valorile în formă de autentificare atunci când l's încărcat pentru a activa butonul submit. Codul este facut pentru jQuery dar este ușor de a schimba, dacă este necesar.
Pe chrome, puteți detecta automată a câmpurilor de setări speciale regulă css pentru autofilled elemente, și apoi verificarea cu javascript dacă elementul are că regula aplicată.
Exemplu:
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"))
Am soluția perfectă pentru această întrebare, încercați acest fragment de cod.
[Demo este aici][1]
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>
Aceasta este soluția pentru browsere cu webkit motor de randare. Atunci când formularul este autofilled, intrările vor primi pseudo clasa :-webkit-automată- (f.e. intrare:-webkit-automată {...}). Deci, aceasta este identificatorul ce trebuie să verificați, prin intermediul JavaScript.
Soluție cu un test de forma:
<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>
Și 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);
});
Problemă atunci când pagină se încarcă se obține parola de valoare, chiar lungime. Acest lucru este pentru că browser-ul's securitate. De asemenea, timeout, l's pentru că browser-ul va umple forma după un timp secvență.
Acest cod se va adăuga clasă auto_filled a umplut intrări. De asemenea, am încercat să verificați tipul de intrare parola valoare, sau de durata, dar's a lucrat doar după un eveniment de pe pagina s-a întâmplat. Așa că am încercat declanșa un eveniment, dar fără succes. Pentru moment aceasta este soluția mea. Bucurați-vă de!
Am folosit aceasta solutie pentru aceeași problemă.
Cod HTML ar trebui să se schimbe la acest lucru:
<input type="text" name="username" />
<input type="text" name="password" id="txt_password" />
și jQuery cod ar trebui să fie în document.gata:
$('#txt_password').focus(function(){
$(this).attr('type','password');
});
Am avut aceeași problemă și am'am scris această soluție.
Acesta începe de votare pe fiecare câmp de intrare atunci când pagina se încarcă (I'am setat la 10 secunde, dar puteți regla această valoare). După 10 secunde se oprește de votare pe fiecare câmp de intrare și de a începe de votare numai pe concentrat de intrare (dacă). Se oprește atunci când estompa input și începe din nou dacă te concentrezi unul.
În acest fel sondaj numai atunci când într-adevăr nevoie și numai pe o intrare 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);
});
Ea nu funcționează destul de bine atunci când aveți mai multe valori introduse automat, dar ar putea fi optimizat în căutarea pentru fiecare intrare în forma actuală.
Ceva de genul:
// 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);
});
Soluția mea este:
$.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');
}
);
});
După cercetarea problema este că browsere webkit nu schimbare foc eveniment pe autocomplete. Soluția mea a fost de a obține completarea automată clasa care webkit adaugă și declanșa schimbarea eveniment de mine.
setTimeout(function() {
if($('input:-webkit-autofill').length > 0) {
//do some stuff
}
},300)
Aici este un link pentru problema în crom. https://bugs.chromium.org/p/chromium/issues/detail?id=636425