Mendeteksi IsiOtomatis Browser

165

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!).

Tidak terdefinisi
sumber
1
Pengecekan membutuhkan beberapa mikrodetik sedangkan intervalnya akan menembakkan cek setiap 100 milidetik atau lebih ... bagaimana itu akan mempengaruhi kinerja sama sekali? Jika ada acara yang dipecat oleh browser saya yakin mereka akan menggunakannya.
Esailija
Saya mengerti maksud Anda, tetapi itu tergantung pada bagian pertama dari pertanyaan saya apakah JavaScript bahkan menyadari perubahan baru saja terjadi (mis. Sebelum dokumen. Sudah)
ditentukan
1
Solusi TERBAIK untuk Chrome / WebKit adalah dengan menggunakan pemilih DOM: document.querySelectorAll ('input: -webkit-autofill'); setelah penundaan singkat setTimeout (... kode di sini ... 250);
ChrisN
pada dasarnya saya ingin pengguna login otomatis jika itu diisi otomatis, atau mengganggu login kembali ketika secara otomatis logout.
Muhammad Umer
@ Chris komentar Anda adalah apa yang sebenarnya membuat saya solusi (sederhana). Tapi saya tidak melihatnya sebagai jawaban! Posting sebagai satu dan ping saya, jadi saya dapat membatalkannya terima kasih.
Ethan Kaminski

Jawaban:

123

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

afrin216
sumber
26
Harap perhatikan ada perbedaan antara pengisian otomatis dan pengisian otomatis. OP secara khusus mengacu pada browser yang mengisi rincian login yang tersimpan pada pemuatan halaman.
Robbert
2
Retas biasa adalah mousenter pada beberapa bagian penting halaman. Acara akan terpicu saat mouse pengguna menuju tombol atau semacamnya.
Bryce
1
@ Bryce Secara pribadi saya akan pergi dengan acara 'blur' karena autofill menjadi sesuatu yang terjadi setelah Anda memasuki area input. Jelas itu tidak ideal tetapi sebagai mundur untuk browser yang tercantum di atas itu bisa sangat membantu
JakeJ
Jangan lupakan inputacaranya. Itulah yang Chrome jalankan pada pelengkapan otomatis (dan mungkin pengisian otomatis juga, jika Chrome memilikinya; saya selalu mematikan hal ini).
TJ Crowder
Lihat jawaban satu baris saya jika Anda hanya ingin tahu apakah nilai dalam kotak teks diisi oleh google chrome autocomplete.
ThdK
70

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:

Lev Kazakov
sumber
1
sejauh ini, ini adalah solusi terbaik! Kudos to Lev di sini untuk ini. Terima kasih telah berbagi solusi Klarna UI ... tidak ada yang berhasil untuk saya sampai saya menemukan ini. Penolong!
Braden Rockwell Napier
1
Selain aturan CSS, keyframe di sini juga github.com/klarna/ui/blob/v4.10.0/Field/styles.scss#L181-L189 juga diperlukan
user1069816
Ini berhasil bagi saya! Perlu bermain-main dengannya sedikit untuk mengetahui pendekatan yang tepat. Terima kasih tim Klarna
pritesh
18

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

$('#email').on('blur input', function() {
    ....
});
James
sumber
6
'input'! Ini adalah solusi termudah bagi saya, tetapi saya menguji hanya autocomplete, bukan autofill.
GreenRaccoon23
blur tidak berfungsi untuk saya dengan beberapa tambahan otomatis lengkap
pathfinder
Input akan terpicu pada setiap penekanan tombol. Jika Anda melakukan panggilan server, ini mungkin memicu untuk sering.
RiZKiT
Solusi bagus! Kombinasi acara ini menyelesaikan masalah dengan isi oleh pengguna dan pengisian otomatis oleh browser.
Petr Hladík
17

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
}
Terima kasih
sumber
Itu juga bekerja untuk saya. Saya mencoba ratusan solusi dan tidak ada yang berhasil. Terima kasih banyak, selamatkan hari saya dan setiap saat saya mencari solusi.
perozzo
4
pendekatan ini menghilangkan kesalahan: "Kesalahan sintaksis, ekspresi yang tidak dikenal: pseudo tidak didukung: -webkit-autofill" di browser lain (saya mencoba di Firefox)
anvita surapaneni
1
Tidak berfungsi pada chrome juga pada tahun 2020, juga melempar kesalahan ekspresi yang tidak dikenal: pseudo tidak didukung: -webkit-autofill
Leo
15

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!");
});
LcSalazar
sumber
1
Untuk beberapa alasan bagi saya, kode ini tidak berfungsi pada redirect halaman (ketika saya logout aplikasi dan diarahkan ke halaman login di mana autofill terjadi). Meskipun itu berfungsi pada penyegaran halaman.
VishwaKumar
1
yang terlihat seperti penguras baterai ponsel: /
Stefan Fisk
@StefanFisk - Tidak juga tidak. Pengatur waktu pengulangan yang sederhana yang diatur pada level JS pada halaman browser tidak cukup berdampak pada baterai Anda, karena ada banyak hal yang terjadi di sebagian besar halaman web .... Anda benar-benar berpikir google.com tidak menetapkan pengatur waktu yang berulang? Betapa cacatnya manajemen daya jika saya dapat memprogram dengan JS halaman web yang menguras baterai pengguna ....
LcSalazar
15

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

DrNio
sumber
Pemikiran yang bagus!
moto
7

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);
    });
Ember
sumber
6

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
David
sumber
Ini bekerja sangat baik dengan Formulir Kustom jQuery. Saya baru saja memasukkannya dan daftar pilihan khusus saya berfungsi sangat baik dengan pengisian otomatis.
Chris Bloom
6

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.

Camilo Martin
sumber
Sempurna. Solusi pertama yang saya temukan bekerja dengan Chrome!
Rid Iculous
3
Benar-benar @RidIculous betapa sederhananya beberapa solusi.
Camilo Martin
3
Tapi elem.val () mengembalikan string kosong untuk bidang kata sandi yang diisi otomatis di chrome :(
Hemant_Negi
@Hemant_Negi, bukankah Chrome mengirimkan acara perubahan? Koreksi saya jika saya salah. Saya menggunakan LastPass dan terlalu malas untuk menonaktifkannya untuk melihat apakah itu juga berfungsi tanpa.
Camilo Martin
1
Ya acara perubahan pengiriman krom tetapi, ketika saya mencoba untuk mengambil nilai itu kembali kosong.
Hemant_Negi
4

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;
} 
st0495
sumber
Ini sangat membantu.
rustyshackleford
Persis apa yang saya butuhkan :)
Dabrule
4

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>
Julesezaar
sumber
3

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.

S.Lund
sumber
1
Kode ini berfungsi baik bagi saya jika Anda memperbarui baris ketiga ke($("#inputID:-webkit-autofill").val().length > 0) {
Hector
3

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!

Adam Šipický
sumber
Ini adalah jawaban terbaru.
Ben Racicot
Saya mencoba solusi ini dan bekerja sangat baik untuk saya. Terima kasih banyak.
Marcus Crisostomo
2

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>

Suresh Pattu
sumber
2

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"))
Pietro Coelho
sumber
2

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;
}
zdrsoft
sumber
1

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

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)

Bridget Arrington
sumber
@ Chris Saya sudah menguji solusi saya dengan IE, browser menangani acara javascsript berbeda. Solusi saya sederhana dan mudah dibaca dan untuk salah satu browser yang lebih sulit dikodekan.
Bridget Arrington
1
Saya berakhir dengan solusi yang sama: bluracara. Saya menerapkan fungsi yang sama untuk changedan bluracara dan bekerja hebat. Solusi sederhana tanpa perpustakaan tambahan.
Paulo Periksa
0

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

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.

terlahir kembali
sumber
0

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

Dan D
sumber
0

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();
});
roger
sumber
0

Saya berhasil menggunakan chrome dengan:

    setTimeout(
       function(){
          $("#input_password").focus();
          $("#input_username").focus();
          console.log($("#input_username").val());
          console.log($("#input_password").val());
       }
    ,500);
Antoine O
sumber
Tidak yakin kapan tepatnya IsiOtomatis Chrome dijalankan, tetapi dalam $ ('input, pilih'). On ('focusin', function (evt) {...}); Saya sudah menerima nilai autofilled untuk semua bidang.
mirek
Versi baru mungkin?
Antoine O
0

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');
          }
      );
  });
Romick
sumber
Penjelasan untuk solusi Anda akan membantu
ton
Saya pikir itu sudah jelas. Jadi pada dasarnya ide adalah untuk memeriksa nilai input field beberapa kali. Dalam implementasi saat ini 10 kali dengan keterlambatan 100 ms. Jadi ketika selama 10 * 1000 = browser 1sec kedua mengisi nilai isi ulang otomatis maka panggilan balik yang diteruskan ke isi ulang otomatis akan dipanggil. Dalam contoh saat ini hanya menambah kelas. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu dan tanyakan saja :).
Romick
0

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

Cvetan Himchev
sumber
0

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
PJ Brunet
sumber
0

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() != '')

Serj
sumber
-2

coba di CSS

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

schwarzkopf
sumber