Timpa pengisian formulir browser dan penyorotan input dengan HTML / CSS

Question 1

Saya memiliki 2 formulir dasar - masuk dan daftar, keduanya di halaman yang sama. Sekarang, saya tidak punya masalah dengan pengisian otomatis formulir masuk,~~tetapi formulir pendaftaran otomatis terisi juga, dan saya tidak menyukainya.~~

Juga, gaya formulir mendapatkan latar belakang kuning yang tidak dapat saya timpa dan saya tidak ingin menggunakan CSS sebaris untuk melakukannya. Apa yang dapat saya lakukan untuk menghentikan warnanya menjadi kuning~~dan (mungkin) pengisian otomatis~~? Terima kasih sebelumnya!

Question 2

untuk pelengkapan otomatis, Anda dapat menggunakan:

<form autocomplete="off">

tentang masalah pewarnaan:

dari tangkapan layar Anda, saya dapat melihat bahwa webkit menghasilkan gaya berikut:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) karena # id-styles bahkan lebih penting daripada gaya .class, berikut ini mungkin berhasil:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) jika itu tidak berhasil, Anda dapat mencoba mengatur gaya melalui javascript secara terprogram

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) jika itu tidak berhasil, ~~Anda ditakdirkan :-)~~ pertimbangkan ini: ini tidak akan menyembunyikan warna kuning, tetapi akan membuat teks dapat dibaca lagi.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) solusi css / javascript:

css:

input:focus {
    background-position: 0 0;
}

dan javascript berikut harus dijalankan saat dimuat:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

misalnya:

<body onload="loadPage();">

semoga berhasil :-)

5) Jika tidak ada yang berhasil, coba hapus elemen masukan, kloning, lalu tempatkan kembali elemen yang digandakan pada halaman (berfungsi di Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) Dari sini :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Question 3

Trik dengan bayangan dalam yang "kuat":

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

Question 4

Tambahkan aturan CSS ini, dan warna latar belakang kuning akan menghilang. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Question 5

<form autocomplete="off">

Hampir semua browser modern akan menghargai itu.

Question 6

Setelah 2 jam mencari, sepertinya Google Chrome masih mengganti warna kuning, tetapi saya menemukan perbaikannya. Ini akan berfungsi untuk hover, fokus, dll. Juga. Yang harus Anda lakukan adalah menambahkannya !important.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

ini akan menghapus warna kuning sepenuhnya dari kolom masukan

Question 7

Anda juga dapat mengubah atribut nama elemen formulir Anda menjadi sesuatu yang dihasilkan sehingga browser tidak akan melacaknya. NAMUN firefox 2.x + dan google chrome tampaknya tidak memiliki banyak masalah dengan itu jika url permintaan identik. Pada dasarnya coba tambahkan parameter permintaan garam dan nama bidang garam untuk formulir pendaftaran.

Namun saya pikir autocomplete = "off" masih merupakan solusi teratas :)

Question 8

Anda dapat menonaktifkan pelengkapan otomatis pada HTML5 (melalui autocomplete="off"), tetapi Anda TIDAK DAPAT menimpa penyorotan browser. Anda dapat mencoba mengotak-atik ::selectionCSS (sebagian besar browser memerlukan prefiks vendor agar berfungsi), tetapi itu mungkin tidak akan membantu Anda juga.

Kecuali jika vendor browser secara khusus menerapkan cara khusus vendor untuk menimpanya, Anda tidak dapat melakukan apa pun tentang gaya yang sudah dimaksudkan untuk mengganti stylesheet situs bagi pengguna. Ini biasanya diterapkan setelah stylesheet Anda diterapkan dan mengabaikan ! importantpenggantian juga.

Question 9

Terkadang pelengkapan otomatis di browser masih terlengkapi secara otomatis jika Anda hanya memiliki kode di <form>elemen.

Saya mencoba memasukkannya ke dalam <input>elemen juga dan itu bekerja lebih baik.

<form autocomplete="off">  AND  <input autocomplete="off">

Namun dukungan untuk atribut ini berhenti, baca https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Pekerjaan lain yang saya temukan adalah mengambil placeholder di dalam bidang masukan yang menyarankan bahwa itu adalah bidang email, nama pengguna, atau telepon (mis. "Email Anda", "Email", dll. ")

masukkan deskripsi gambar di sini

Ini membuatnya sehingga browser tidak tahu jenis bidangnya, sehingga tidak mencoba melengkapinya secara otomatis.

Question 10

Jika di kolom masukan Anda mencoba untuk "menghapus kuning" ...

Setel warna latar belakang dengan css ... katakanlah #ccc (abu-abu terang).
Tambahkan nilai = "sesuatu", yang sementara mengisi bidang dengan "beberapa teks"
(opsional) Tambahkan sedikit javascript untuk memperjelas "teks tertentu" saat Anda memasukkan teks asli.

Jadi, mungkin akan terlihat seperti ini:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

Question 11

Ini memperbaiki masalah di Safari dan Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Question 12

Tangkapan layar yang Anda tautkan mengatakan bahwa WebKit menggunakan pemilih input:-webkit-autofilluntuk elemen tersebut. Sudahkah Anda mencoba meletakkan ini di CSS Anda?

input:-webkit-autofill {
    background-color: white !important;
}

Jika itu tidak berhasil, mungkin tidak ada yang berhasil. Bidang-bidang tersebut disorot untuk memperingatkan pengguna bahwa mereka telah diisi otomatis dengan informasi pribadi (seperti alamat rumah pengguna) dan dapat dikatakan bahwa mengizinkan halaman untuk disembunyikan memungkinkan adanya risiko keamanan.

Question 13

The formelemen memiliki autocompleteatribut yang Anda dapat mengatur untuk off. Pada CSS, !importantperintah setelah properti membuatnya tidak diganti:

background-color: white !important;

Hanya IE6 yang tidak memahaminya.

Jika saya salah paham, ada juga outlineproperti yang menurut Anda berguna.

Question 14

Saya telah melihat fitur pelengkapan otomatis toolbar Google dinonaktifkan dengan javascript. Ini mungkin berfungsi dengan beberapa alat IsiOtomatis lainnya; Saya tidak tahu apakah itu akan membantu dengan browser bawaan pelengkapan otomatis.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Question 15

Setelah mencoba banyak hal, saya menemukan solusi yang berfungsi yang mengaktifkan bidang pengisian otomatis dan menggantinya dengan duplikat. Agar tidak kehilangan acara terlampir, saya datang dengan solusi lain (agak panjang).

Pada setiap peristiwa "masukan", ia dengan cepat melampirkan peristiwa "perubahan" ke semua masukan yang terlibat. Ini menguji apakah mereka telah diisi otomatis. Jika ya, maka kirimkan peristiwa teks baru yang akan mengelabui browser untuk berpikir bahwa nilai telah diubah oleh pengguna, sehingga memungkinkan untuk menghapus latar belakang kuning.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Question 16

Solusi javascript sederhana untuk semua browser:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Klon masukan, setel ulang atribut dan sembunyikan masukan asli. Waktu tunggu diperlukan untuk iPad

Question 17

Karena browser mencari bidang jenis kata sandi, solusi lain adalah memasukkan bidang tersembunyi di awal formulir Anda:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

Question 18

Saya telah membaca begitu banyak utas dan mencoba begitu banyak potongan kode. Setelah mengumpulkan semua itu, satu-satunya cara saya menemukan untuk mengosongkan bidang login dan kata sandi dengan bersih dan mengatur ulang latar belakangnya menjadi putih adalah sebagai berikut:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Jangan ragu untuk berkomentar, saya terbuka untuk semua peningkatan jika Anda menemukannya.

Question 19

Pelengkapan otomatis tidak didukung oleh browser modern. Cara termudah untuk menyelesaikan pelengkapan otomatis yang saya temukan adalah sedikit melacak dengan HTML dan JS. Hal pertama yang harus dilakukan adalah mengubah jenis input dalam HTML dari 'password' menjadi 'text'.

<input class="input input-xxl input-watery" type="text" name="password"/>

Pelengkapan otomatis dimulai setelah jendela dimuat. Tidak apa-apa. Tetapi ketika jenis bidang Anda bukan 'kata sandi', browser tidak tahu bidang apa yang harus diisi. Jadi, tidak akan ada pelengkapan otomatis pada bidang formulir.

Setelah itu, ikat event focusin ke field password, misalnya. di Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

Di onInputPasswordFocusIn, cukup ubah jenis bidang Anda menjadi kata sandi, dengan pemeriksaan sederhana:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

Itu dia!

UPD: hal ini tidak berfungsi dengan JavaSciprt yang dinonaktifkan

UPD tahun 2018. Juga ditemukan beberapa trik lucu. Setel atribut readonly ke bidang input, dan hapus di acara fokus. Pertama, cegah browser dari bidang pengisian otomatis, yang kedua memungkinkan untuk memasukkan data.

Question 20

Silakan coba dengan autocomplete = "none" di tag masukan Anda

Ini berhasil untuk saya

Question 21

Saya juga harus mengubah warna teks menjadi sesuatu yang lebih gelap (lihat warna tema gelap StackOverflow).

Jadi berakhir dengan hibrida solusi @ Tamás Pap, @MCBL dan @ don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

Question 22

Ini sepertinya berhasil untuk saya:

input {
  -webkit-background-clip: text !important;
}

Luaskan cuplikan

Question 23

Mengapa tidak meletakkan ini di css Anda:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Itu seharusnya menangani masalah Anda. Meskipun hal itu menimbulkan masalah kegunaan karena sekarang pengguna tidak dapat melihat bahwa formulir telah diisi otomatis seperti biasanya.

[Sunting] Setelah memposting ini saya melihat bahwa jawaban yang sama telah diberikan dan Anda mengomentarinya bahwa itu tidak berhasil. Saya tidak begitu mengerti mengapa karena berhasil ketika saya mengujinya.

Question 24

Masalah NYATA di sini adalah Webkit (Safari, Chrome, ...) memiliki bug. Jika ada lebih dari satu [formulir] pada halaman, masing-masing dengan [input type = "text" name = "foo" ...] (yaitu dengan nilai yang sama untuk atribut 'name'), lalu saat pengguna kembali Untuk halaman autofill akan dilakukan pada kolom input [formulir] PERTAMA pada halaman tersebut, bukan pada [formulir] yang dikirimkan. Kedua kalinya, [formulir] BERIKUTNYA akan diisi otomatis, dan seterusnya. Hanya [formulir] dengan bidang teks masukan dengan nama SAMA yang akan terpengaruh.

Ini harus dilaporkan ke pengembang Webkit.

Opera mengisi otomatis [formulir] kanan.

Firefox dan IE tidak mengisi otomatis.

Jadi, saya katakan lagi: ini adalah bug di Webkit.

Answer 1

141

Saya memiliki 2 formulir dasar - masuk dan daftar, keduanya di halaman yang sama. Sekarang, saya tidak punya masalah dengan pengisian otomatis formulir masuk,~~tetapi formulir pendaftaran otomatis terisi juga, dan saya tidak menyukainya.~~

Juga, gaya formulir mendapatkan latar belakang kuning yang tidak dapat saya timpa dan saya tidak ingin menggunakan CSS sebaris untuk melakukannya. Apa yang dapat saya lakukan untuk menghentikan warnanya menjadi kuning~~dan (mungkin) pengisian otomatis~~? Terima kasih sebelumnya!

html css input autofill casraf.dll
sumber

4

Anda benar-benar mengajukan dua pertanyaan di sini: Bagaimana cara menonaktifkan pengisian otomatis formulir? -AND- Bagaimana cara menimpa latar belakang kuning saat formulir isiotomatis diaktifkan? Ini tidak jelas sampai saya membaca semua komentar di jawaban di bawah. Anda mungkin ingin mempertimbangkan untuk mengedit pertanyaan Anda (terutama karena Anda telah melangkah lebih jauh untuk menawarkan hadiah).

benzado

Anda benar, diedit. Atau versi malasnya.

casraf

1

Sebagai pengguna formulir, saya tidak suka kegunaan saya dilumpuhkan karena preferensi visual Anda dengan memaksa pelengkapan otomatis dan penonaktifan. Biarkan pengguna mematikan ini, bukan Anda. Tinggalkan pengalaman browsing saya.

Byran Zaugg

Itu masalahnya, saya hanya menonaktifkan pelengkapan otomatis di formulir PENDAFTARAN, yang pada dasarnya, tidak boleh memiliki pelengkapan otomatis biasa, info penyelesaian hanya dibuat setelah Anda mendaftar. Sedangkan untuk formulir login, saya ingin tetap mengaktifkan pelengkapan otomatis, tetapi cukup nonaktifkan warna bodoh yang diberikan pada kolom masukan karena teks di dalamnya menjadi tidak dapat dibaca - latar belakang kuning dan warna teks putih (latar belakang asli abu-abu tua) .

casraf

1

kemungkinan duplikat dari

pengisian

Answer 2

4

Anda benar-benar mengajukan dua pertanyaan di sini: Bagaimana cara menonaktifkan pengisian otomatis formulir? -AND- Bagaimana cara menimpa latar belakang kuning saat formulir isiotomatis diaktifkan? Ini tidak jelas sampai saya membaca semua komentar di jawaban di bawah. Anda mungkin ingin mempertimbangkan untuk mengedit pertanyaan Anda (terutama karena Anda telah melangkah lebih jauh untuk menawarkan hadiah).

benzado

Answer 3

Anda benar, diedit. Atau versi malasnya.

casraf

Answer 4

1

Sebagai pengguna formulir, saya tidak suka kegunaan saya dilumpuhkan karena preferensi visual Anda dengan memaksa pelengkapan otomatis dan penonaktifan. Biarkan pengguna mematikan ini, bukan Anda. Tinggalkan pengalaman browsing saya.

Byran Zaugg

Answer 5

Itu masalahnya, saya hanya menonaktifkan pelengkapan otomatis di formulir PENDAFTARAN, yang pada dasarnya, tidak boleh memiliki pelengkapan otomatis biasa, info penyelesaian hanya dibuat setelah Anda mendaftar. Sedangkan untuk formulir login, saya ingin tetap mengaktifkan pelengkapan otomatis, tetapi cukup nonaktifkan warna bodoh yang diberikan pada kolom masukan karena teks di dalamnya menjadi tidak dapat dibaca - latar belakang kuning dan warna teks putih (latar belakang asli abu-abu tua) .

casraf

Answer 6

1

kemungkinan duplikat dari

pengisian

Answer 7

untuk pelengkapan otomatis, Anda dapat menggunakan:

<form autocomplete="off">

tentang masalah pewarnaan:

dari tangkapan layar Anda, saya dapat melihat bahwa webkit menghasilkan gaya berikut:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) karena # id-styles bahkan lebih penting daripada gaya .class, berikut ini mungkin berhasil:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) jika itu tidak berhasil, Anda dapat mencoba mengatur gaya melalui javascript secara terprogram

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) jika itu tidak berhasil, ~~Anda ditakdirkan :-)~~ pertimbangkan ini: ini tidak akan menyembunyikan warna kuning, tetapi akan membuat teks dapat dibaca lagi.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) solusi css / javascript:

css:

input:focus {
    background-position: 0 0;
}

dan javascript berikut harus dijalankan saat dimuat:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

misalnya:

<body onload="loadPage();">

semoga berhasil :-)

5) Jika tidak ada yang berhasil, coba hapus elemen masukan, kloning, lalu tempatkan kembali elemen yang digandakan pada halaman (berfungsi di Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) Dari sini :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Answer 8

(1) tidak berhasil. Saya akan mencoba (2) ketika saya kembali ke rumah; semoga JS dapat mengesampingkan ini; terima kasih :)

casraf

Answer 9

1

(4) jelas menghilangkan kuning: batas fokus.

ruruskyi

Answer 10

Jika bit terakhir tidak berfungsi untuk Anda, dan Anda benar-benar tahu cara kerja javascript (mendapatkan Id yang benar, dll.) Anda mungkin memiliki masalah yang saya alami, saya menggunakan jquery mobile karena beberapa alasan dan ini kemudian masuk dan menggantikan input kelihatannya. Jadi yang saya lakukan adalah mengatur interval yang mengkloningnya setiap 50 ms (ini berfungsi setelah 400ms menggunakan setTimeout tetapi saya tidak ingin mengambil risiko koneksi lambat). Dan setelah satu detik interval dihilangkan:code

Mathijs Segers

Answer 11

var keepTheInputCloned = setInterval(function(){                          var e = document.getElementById('id_email');             var ep = e.parentNode;             ep.removeChild(e);             var e2 = e.cloneNode();             ep.appendChild(e2);              var p = document.getElementById('id_password');             var pp = p.parentNode;             pp.removeChild(p);             var p2 = p.cloneNode();             pp.appendChild(p2);         },50);         setTimeout(function(){clearInterval(keepTheInputCloned)},1000);

Mathijs Segers

Answer 12

Saya mengalami masalah serupa dengan Safari di Mavericks. Tetapi ketika saya menggunakan metode 5, mereka melakukannya selama satu detik (atau tiga detik ketika saya menyetel batas waktu ke 3000) dan kemudian browser menang dan saya mengaktifkan pelengkapan otomatis. Dalam kasus penggunaan saya, saya meminta pengguna untuk nama pengguna / kata sandi mereka untuk situs lain sehingga saya dapat menarik info dari situs lain, jadi saya pasti tidak ingin itu mengisi otomatis nama pengguna dan kata sandi yang mereka gunakan untuk situs saya. Ada pemikiran tentang ini (selain malapetaka dari # 3 yang asli)?

Jack RG

Answer 13

224

Trik dengan bayangan dalam yang "kuat":

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

Pap
sumber

11

Ini sangat pintar. :)

Jordan Grey

3

+1000 (jika saya bisa) Ya, saya tidak tahu cara lain untuk melakukan ini. Ini benar-benar mengganggu webkit ...

o_O

1

luar biasa ini harus menjadi jawaban nomor satu, sederhana dan efektif

Pixelomo

3

Ini luar biasa karena berhasil dan sangat kreatif. Tapi itu mengingatkan saya pada peretasan IE6 lama dan sejenisnya. Agak jelek Google memberi kami: -webkit-parameter isi otomatis dan tidak membiarkan desainer mengganti default, kan?

squarecandy

1

Memberikan pilihan warna yang tidak dapat disesuaikan tidak membantu kegunaan, atau aksesibilitas. Kekhawatiran tersebut masih sepenuhnya berada di tangan pengembang, kecuali untuk peretasan yang membuat frustrasi di Chrome ini. Tidak ada yang bisa menyalahkan niat pengembang Chrome, hanya hasilnya.

Lunster

Answer 14

11

Ini sangat pintar. :)

Jordan Grey

Answer 15

3

+1000 (jika saya bisa) Ya, saya tidak tahu cara lain untuk melakukan ini. Ini benar-benar mengganggu webkit ...

o_O

Answer 16

1

luar biasa ini harus menjadi jawaban nomor satu, sederhana dan efektif

Pixelomo

Answer 17

3

Ini luar biasa karena berhasil dan sangat kreatif. Tapi itu mengingatkan saya pada peretasan IE6 lama dan sejenisnya. Agak jelek Google memberi kami: -webkit-parameter isi otomatis dan tidak membiarkan desainer mengganti default, kan?

squarecandy

Answer 18

1

Memberikan pilihan warna yang tidak dapat disesuaikan tidak membantu kegunaan, atau aksesibilitas. Kekhawatiran tersebut masih sepenuhnya berada di tangan pengembang, kecuali untuk peretasan yang membuat frustrasi di Chrome ini. Tidak ada yang bisa menyalahkan niat pengembang Chrome, hanya hasilnya.

Lunster

Answer 19

26

Tambahkan aturan CSS ini, dan warna latar belakang kuning akan menghilang. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

MCBL
sumber

1

Ini berhasil untuk saya - terima kasih! (meskipun saya perlu mengubah warna putih ke warna yang sebenarnya saya inginkan)

jennEDVT

2

Jelas merupakan jawaban terbaik.

Brandon Harris

Answer 20

1

Ini berhasil untuk saya - terima kasih! (meskipun saya perlu mengubah warna putih ke warna yang sebenarnya saya inginkan)

jennEDVT

Answer 21

2

Jelas merupakan jawaban terbaik.

Brandon Harris

Answer 22

16

<form autocomplete="off">

Hampir semua browser modern akan menghargai itu.

Jason Kester
sumber

7

Luar biasa, tetapi itu hanya menyelesaikan masalah yang kurang penting; bagaimana saya bisa tetap melengkapi otomatis tetapi kehilangan gaya ( prntscr.com/4hkh ) webkit mendorong ke dalam tenggorokannya? o: terima kasih

casraf

1

Sebenarnya, itu harus melakukan keduanya. Kotak hanya berubah menjadi kuning untuk memberi tahu Anda bahwa chrome / safari / ff telah mengisinya secara otomatis dengan sandi Anda. Jika Anda menyuruhnya untuk tidak mengisi, itu tidak akan mendapat kesempatan untuk mewarnainya.

Jason Kester

11

ya, tapi lihat apa yang saya katakan: "bagaimana saya bisa tetap otomatis lengkap tetapi kehilangan gaya webkit shoves"

casraf

Satu-satunya masalah autocompleteadalah bahwa itu tidak valid dalam HTML sebelum versi 5.

Paul D. Waite

Answer 23

7

Luar biasa, tetapi itu hanya menyelesaikan masalah yang kurang penting; bagaimana saya bisa tetap melengkapi otomatis tetapi kehilangan gaya ( prntscr.com/4hkh ) webkit mendorong ke dalam tenggorokannya? o: terima kasih

casraf

Answer 24

1

Sebenarnya, itu harus melakukan keduanya. Kotak hanya berubah menjadi kuning untuk memberi tahu Anda bahwa chrome / safari / ff telah mengisinya secara otomatis dengan sandi Anda. Jika Anda menyuruhnya untuk tidak mengisi, itu tidak akan mendapat kesempatan untuk mewarnainya.

Jason Kester

Answer 25

11

ya, tapi lihat apa yang saya katakan: "bagaimana saya bisa tetap otomatis lengkap tetapi kehilangan gaya webkit shoves"

casraf

Answer 26

Satu-satunya masalah autocompleteadalah bahwa itu tidak valid dalam HTML sebelum versi 5.

Paul D. Waite

Answer 27

Setelah 2 jam mencari, sepertinya Google Chrome masih mengganti warna kuning, tetapi saya menemukan perbaikannya. Ini akan berfungsi untuk hover, fokus, dll. Juga. Yang harus Anda lakukan adalah menambahkannya !important.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

ini akan menghapus warna kuning sepenuhnya dari kolom masukan

Answer 28

Ini bekerja untuk saya tanpa 1000px, hanya 0 di semua tempat, -webkit-box-shadow: 0 0 0 0 white inset! Important;

Luis Lopez

Answer 29

Anda juga dapat mengubah atribut nama elemen formulir Anda menjadi sesuatu yang dihasilkan sehingga browser tidak akan melacaknya. NAMUN firefox 2.x + dan google chrome tampaknya tidak memiliki banyak masalah dengan itu jika url permintaan identik. Pada dasarnya coba tambahkan parameter permintaan garam dan nama bidang garam untuk formulir pendaftaran.

Namun saya pikir autocomplete = "off" masih merupakan solusi teratas :)

Answer 30

Anda dapat menonaktifkan pelengkapan otomatis pada HTML5 (melalui autocomplete="off"), tetapi Anda TIDAK DAPAT menimpa penyorotan browser. Anda dapat mencoba mengotak-atik ::selectionCSS (sebagian besar browser memerlukan prefiks vendor agar berfungsi), tetapi itu mungkin tidak akan membantu Anda juga.

Kecuali jika vendor browser secara khusus menerapkan cara khusus vendor untuk menimpanya, Anda tidak dapat melakukan apa pun tentang gaya yang sudah dimaksudkan untuk mengganti stylesheet situs bagi pengguna. Ini biasanya diterapkan setelah stylesheet Anda diterapkan dan mengabaikan ! importantpenggantian juga.

Answer 31

Terkadang pelengkapan otomatis di browser masih terlengkapi secara otomatis jika Anda hanya memiliki kode di <form>elemen.

Saya mencoba memasukkannya ke dalam <input>elemen juga dan itu bekerja lebih baik.

<form autocomplete="off">  AND  <input autocomplete="off">

Namun dukungan untuk atribut ini berhenti, baca https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Pekerjaan lain yang saya temukan adalah mengambil placeholder di dalam bidang masukan yang menyarankan bahwa itu adalah bidang email, nama pengguna, atau telepon (mis. "Email Anda", "Email", dll. ")

masukkan deskripsi gambar di sini

Ini membuatnya sehingga browser tidak tahu jenis bidangnya, sehingga tidak mencoba melengkapinya secara otomatis.

Answer 32

Apa yang saya suka tentang ini adalah kebanyakan orang TIDAK AKAN menghargai seluruh formulir yang tidak diisi pada halaman yang dimuat ulang (mis. Area teks yang panjang), tetapi memungkinkan pengembang untuk mencegah elemen tertentu diisi (mis. Nomor kartu bank). Sayangnya, dukungan untuk atribut ini berhenti

Luke Madhanga

Answer 33

Jika di kolom masukan Anda mencoba untuk "menghapus kuning" ...

Setel warna latar belakang dengan css ... katakanlah #ccc (abu-abu terang).
Tambahkan nilai = "sesuatu", yang sementara mengisi bidang dengan "beberapa teks"
(opsional) Tambahkan sedikit javascript untuk memperjelas "teks tertentu" saat Anda memasukkan teks asli.

Jadi, mungkin akan terlihat seperti ini:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />

Answer 34

1

Ini memperbaiki masalah di Safari dan Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

Arjan
sumber

1

Saya percaya itu akan terjadi, tetapi bukankah akan sedikit kasar untuk melakukan ini 50 kali setiap detik? Saya tahu ini akan berhasil dan tidak akan terlalu lambat. Tapi sepertinya terlalu berlebihan.

Mathijs Segers

Answer 35

1

Saya percaya itu akan terjadi, tetapi bukankah akan sedikit kasar untuk melakukan ini 50 kali setiap detik? Saya tahu ini akan berhasil dan tidak akan terlalu lambat. Tapi sepertinya terlalu berlebihan.

Mathijs Segers

Answer 36

Tangkapan layar yang Anda tautkan mengatakan bahwa WebKit menggunakan pemilih input:-webkit-autofilluntuk elemen tersebut. Sudahkah Anda mencoba meletakkan ini di CSS Anda?

input:-webkit-autofill {
    background-color: white !important;
}

Jika itu tidak berhasil, mungkin tidak ada yang berhasil. Bidang-bidang tersebut disorot untuk memperingatkan pengguna bahwa mereka telah diisi otomatis dengan informasi pribadi (seperti alamat rumah pengguna) dan dapat dikatakan bahwa mengizinkan halaman untuk disembunyikan memungkinkan adanya risiko keamanan.

Answer 37

0

The formelemen memiliki autocompleteatribut yang Anda dapat mengatur untuk off. Pada CSS, !importantperintah setelah properti membuatnya tidak diganti:

background-color: white !important;

Hanya IE6 yang tidak memahaminya.

Jika saya salah paham, ada juga outlineproperti yang menurut Anda berguna.

zneak
sumber

2

Chrome tampaknya mengabaikan! Penting saat mengisi otomatis bidang masukan

Torandi

@Torandi Mungkin karena stylesheet agen pengguna. Setelan dari stylesheet agen-pengguna harus diterapkan terakhir, kecuali memiliki !importantarahan, dalam hal ini akan diutamakan daripada yang lainnya. Anda harus memeriksa lembar gaya agen pengguna Anda (meskipun saya tidak tahu di mana menemukannya).

zneak

Answer 38

2

Chrome tampaknya mengabaikan! Penting saat mengisi otomatis bidang masukan

Torandi

Answer 39

@Torandi Mungkin karena stylesheet agen pengguna. Setelan dari stylesheet agen-pengguna harus diterapkan terakhir, kecuali memiliki !importantarahan, dalam hal ini akan diutamakan daripada yang lainnya. Anda harus memeriksa lembar gaya agen pengguna Anda (meskipun saya tidak tahu di mana menemukannya).

zneak

Answer 40

Saya telah melihat fitur pelengkapan otomatis toolbar Google dinonaktifkan dengan javascript. Ini mungkin berfungsi dengan beberapa alat IsiOtomatis lainnya; Saya tidak tahu apakah itu akan membantu dengan browser bawaan pelengkapan otomatis.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>

Answer 41

Setelah mencoba banyak hal, saya menemukan solusi yang berfungsi yang mengaktifkan bidang pengisian otomatis dan menggantinya dengan duplikat. Agar tidak kehilangan acara terlampir, saya datang dengan solusi lain (agak panjang).

Pada setiap peristiwa "masukan", ia dengan cepat melampirkan peristiwa "perubahan" ke semua masukan yang terlibat. Ini menguji apakah mereka telah diisi otomatis. Jika ya, maka kirimkan peristiwa teks baru yang akan mengelabui browser untuk berpikir bahwa nilai telah diubah oleh pengguna, sehingga memungkinkan untuk menghapus latar belakang kuning.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});

Answer 42

Solusi javascript sederhana untuk semua browser:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Klon masukan, setel ulang atribut dan sembunyikan masukan asli. Waktu tunggu diperlukan untuk iPad

Answer 43

Karena browser mencari bidang jenis kata sandi, solusi lain adalah memasukkan bidang tersembunyi di awal formulir Anda:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />

Answer 44

Saya telah membaca begitu banyak utas dan mencoba begitu banyak potongan kode. Setelah mengumpulkan semua itu, satu-satunya cara saya menemukan untuk mengosongkan bidang login dan kata sandi dengan bersih dan mengatur ulang latar belakangnya menjadi putih adalah sebagai berikut:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Jangan ragu untuk berkomentar, saya terbuka untuk semua peningkatan jika Anda menemukannya.

Answer 45

0

Pelengkapan otomatis tidak didukung oleh browser modern. Cara termudah untuk menyelesaikan pelengkapan otomatis yang saya temukan adalah sedikit melacak dengan HTML dan JS. Hal pertama yang harus dilakukan adalah mengubah jenis input dalam HTML dari 'password' menjadi 'text'.

<input class="input input-xxl input-watery" type="text" name="password"/>

Pelengkapan otomatis dimulai setelah jendela dimuat. Tidak apa-apa. Tetapi ketika jenis bidang Anda bukan 'kata sandi', browser tidak tahu bidang apa yang harus diisi. Jadi, tidak akan ada pelengkapan otomatis pada bidang formulir.

Setelah itu, ikat event focusin ke field password, misalnya. di Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

Di onInputPasswordFocusIn, cukup ubah jenis bidang Anda menjadi kata sandi, dengan pemeriksaan sederhana:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

Itu dia!

UPD: hal ini tidak berfungsi dengan JavaSciprt yang dinonaktifkan

UPD tahun 2018. Juga ditemukan beberapa trik lucu. Setel atribut readonly ke bidang input, dan hapus di acara fokus. Pertama, cegah browser dari bidang pengisian otomatis, yang kedua memungkinkan untuk memasukkan data.

volodymyr3131
sumber

Pelengkapan otomatis yang baik adalah bagian dari standar, meskipun penggunaan & implementasinya mungkin berbeda. Selain itu, mengubah jenis input di IE gagal secara spektakuler, itulah sebabnya jQuery memblokirnya, tetapi umumnya bukan ide yang baik jika Anda berencana untuk mendukung pengembang

IE.mozilla.org/en-US/docs/Web/Security/…

@casraf Maaf, ini adalah bagian dari standart, tapi tidak bekerja di semua browser modern sebagaimana mestinya, jadi tidak akan melakukan apa yang diciptakannya. Di EDGE berfungsi dengan baik, tentang versi sebelumnya tidak dapat memberi tahu apa pun (

volodymyr3131

Benar, ini tidak diterapkan di mana-mana. Masalahnya masih ada - tergantung pada seberapa jauh Anda ingin mendukung IE - sebelum v 11, saya tidak yakin Anda dapat mengubah jenis input. Jika Anda tidak khawatir tentang versi lama, maka Anda sebaiknya menggunakan autocomplete=off, karena berfungsi di FF, Chrome untuk sementara waktu, dan IE pada versi sebelumnya atau lebih

casraf

Saya sudah mencoba menggunakan autocomplete = off, baik untuk input maupun formulir, dan Chrome masih mengisi data formulir pendaftaran dan masuk (. Ini hanya semacam keajaiban aneh, karena berdasarkan komentar, dalam beberapa kasus berhasil, dan dalam beberapa tidak =)

volodymyr3131

Saya tahu, standar ini tidak benar-benar diikuti secara konsisten. Sayang sekali, membuat hidup kita lebih sulit :(

casraf

Answer 46

Pelengkapan otomatis yang baik adalah bagian dari standar, meskipun penggunaan & implementasinya mungkin berbeda. Selain itu, mengubah jenis input di IE gagal secara spektakuler, itulah sebabnya jQuery memblokirnya, tetapi umumnya bukan ide yang baik jika Anda berencana untuk mendukung pengembang

IE.mozilla.org/en-US/docs/Web/Security/…

Answer 47

@casraf Maaf, ini adalah bagian dari standart, tapi tidak bekerja di semua browser modern sebagaimana mestinya, jadi tidak akan melakukan apa yang diciptakannya. Di EDGE berfungsi dengan baik, tentang versi sebelumnya tidak dapat memberi tahu apa pun (

volodymyr3131

Answer 48

Benar, ini tidak diterapkan di mana-mana. Masalahnya masih ada - tergantung pada seberapa jauh Anda ingin mendukung IE - sebelum v 11, saya tidak yakin Anda dapat mengubah jenis input. Jika Anda tidak khawatir tentang versi lama, maka Anda sebaiknya menggunakan autocomplete=off, karena berfungsi di FF, Chrome untuk sementara waktu, dan IE pada versi sebelumnya atau lebih

casraf

Answer 49

Saya sudah mencoba menggunakan autocomplete = off, baik untuk input maupun formulir, dan Chrome masih mengisi data formulir pendaftaran dan masuk (. Ini hanya semacam keajaiban aneh, karena berdasarkan komentar, dalam beberapa kasus berhasil, dan dalam beberapa tidak =)

volodymyr3131

Answer 50

Saya tahu, standar ini tidak benar-benar diikuti secara konsisten. Sayang sekali, membuat hidup kita lebih sulit :(

casraf

Answer 51

0

Silakan coba dengan autocomplete = "none" di tag masukan Anda

Ini berhasil untuk saya

Vayodya Tamari
sumber

Answer 52

Saya juga harus mengubah warna teks menjadi sesuatu yang lebih gelap (lihat warna tema gelap StackOverflow).

Jadi berakhir dengan hibrida solusi @ Tamás Pap, @MCBL dan @ don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}

Answer 53

0

Ini sepertinya berhasil untuk saya:

input {
  -webkit-background-clip: text !important;
}

Luaskan cuplikan

Kerry7777
sumber

Answer 54

-3

Mengapa tidak meletakkan ini di css Anda:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Itu seharusnya menangani masalah Anda. Meskipun hal itu menimbulkan masalah kegunaan karena sekarang pengguna tidak dapat melihat bahwa formulir telah diisi otomatis seperti biasanya.

[Sunting] Setelah memposting ini saya melihat bahwa jawaban yang sama telah diberikan dan Anda mengomentarinya bahwa itu tidak berhasil. Saya tidak begitu mengerti mengapa karena berhasil ketika saya mengujinya.

Keris
sumber

tidak berfungsi di chrome dan safari. gaya adalah input:-webkit-autofilldan input --webkit-autocompletesama sekali tidak ada

ruruskyi

@EliseuMonar: Saya cukup yakin saya tidak berbohong, tetapi tidak dapat mengingat detail tentang bagaimana atau di mana saya mengujinya. Kode itu sendiri mungkin diketik dari memori, bukan disalin / ditempel, jadi pelengkapan otomatis vs. IsiOtomatis? Saya tidak tahu.

Kris

Answer 55

tidak berfungsi di chrome dan safari. gaya adalah input:-webkit-autofilldan input --webkit-autocompletesama sekali tidak ada

ruruskyi

Answer 56

@EliseuMonar: Saya cukup yakin saya tidak berbohong, tetapi tidak dapat mengingat detail tentang bagaimana atau di mana saya mengujinya. Kode itu sendiri mungkin diketik dari memori, bukan disalin / ditempel, jadi pelengkapan otomatis vs. IsiOtomatis? Saya tidak tahu.

Kris

Answer 57

Masalah NYATA di sini adalah Webkit (Safari, Chrome, ...) memiliki bug. Jika ada lebih dari satu [formulir] pada halaman, masing-masing dengan [input type = "text" name = "foo" ...] (yaitu dengan nilai yang sama untuk atribut 'name'), lalu saat pengguna kembali Untuk halaman autofill akan dilakukan pada kolom input [formulir] PERTAMA pada halaman tersebut, bukan pada [formulir] yang dikirimkan. Kedua kalinya, [formulir] BERIKUTNYA akan diisi otomatis, dan seterusnya. Hanya [formulir] dengan bidang teks masukan dengan nama SAMA yang akan terpengaruh.

Ini harus dilaporkan ke pengembang Webkit.

Opera mengisi otomatis [formulir] kanan.

Firefox dan IE tidak mengisi otomatis.

Jadi, saya katakan lagi: ini adalah bug di Webkit.

Timpa pengisian formulir browser dan penyorotan input dengan HTML / CSS

Jawaban: