Mengapa Chrome Menyimpan Teks Pemegang Tempat Apabila Difokuskan dan Bagaimana Saya Boleh Membetulkannya?

Mengatasi Gangguan Autofokus Ruang Tempat Chrome dengan CSS dan jQuery

Apabila bekerja dengan teks pemegang tempat dalam HTML, adalah perkara biasa untuk menghadapi isu di mana teks pemegang tempat kekal kelihatan walaupun apabila medan input mendapat fokus. Penyemak imbas seperti Firefox, Safari dan Edge mengendalikan ini dengan anggun dan menyembunyikan teks pemegang tempat secara automatik. Walau bagaimanapun, Chrome sering gagal berbuat demikian.

Untuk menangani isu khusus ini dengan Chrome, kami boleh menggunakan CSS atau jQuery. Menggunakan peraturan CSS berikut, anda boleh menjadikan teks pemegang tempat telus apabila medan input menerima fokus:

input:focus::placeholder {
  color: transparent;
}

Pengisytiharan CSS ini menyasarkan teks pemegang tempat secara khusus apabila medan input difokuskan. Dengan menetapkan warna kepada lutsinar, teks pemegang tempat menjadi tidak kelihatan dengan berkesan.

Jika anda lebih suka penyelesaian jQuery, anda boleh menggunakan kod berikut:

$(function() {
  $("input[placeholder]").focus(function() {
    $(this).attr("placeholder", "");
  });

  $("input[placeholder]").blur(function() {
    $(this).attr("placeholder", $(this).attr("data-placeholder"));
  });
});

Dalam kod jQuery ini, kami mendengar untuk acara fokus dan acara kabur pada elemen input dengan atribut pemegang tempat. Apabila fokus diperoleh, kami mengosongkan atribut pemegang tempat, yang menyembunyikan teks pemegang tempat. Apabila fokus hilang, kami memulihkan teks pemegang tempat dengan menetapkan atribut pemegang tempat kepada nilai yang disimpan dalam atribut pemegang tempat data, yang kami tetapkan semasa pemula.

Kedua-dua penyelesaian CSS dan jQuery secara berkesan menyembunyikan teks pemegang tempat secara automatik dalam Chrome apabila medan input mendapat tumpuan, memastikan pengalaman yang konsisten dan mesra pengguna merentas semua penyemak imbas.

Atas ialah kandungan terperinci Mengapa Chrome Menyimpan Teks Pemegang Tempat Apabila Difokuskan dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!