Bagaimana untuk Membuat Teks Pemegang Tempat Auto-Sembunyikan pada Fokus dalam Chrome?

AutoMenyembunyikan Teks Pemegang Tempat pada Fokus: Panduan Komprehensif

Apabila menambah teks pemegang tempat pada medan input, penyemak imbas biasanya menyembunyikannya apabila fokus pengguna . Walau bagaimanapun, Chrome mempamerkan pengecualian kepada tingkah laku ini. Untuk menangani isu ini dengan berkesan, mari kita terokai penyelesaian yang berpotensi menggunakan kedua-dua CSS dan jQuery.

Penyelesaian CSS

<br>input:focus::placeholder { <br> warna: telus;<br>}<br>

Peraturan CSS ini secara khusus menyasarkan teks pemegang tempat apabila medan input menerima fokus, menjadikannya telus. Akibatnya, teks pemegang tempat menjadi pudar, mensimulasikan tingkah laku penyembunyian automatik yang diingini.

Penyelesaian jQuery

Walaupun penyelesaian CSS mencukupi untuk kebanyakan penyemak imbas, jQuery menawarkan alternatif pendekatan untuk penyesuaian selanjutnya:

$(function() {
$("input").fokus(fungsi() {

$(this).attr("placeholder", "");

}).kabur(fungsi() {

$(this).attr("placeholder", "Type something here!");

});
});

Skrip jQuery ini mendengar fokus dan acara kabur pada medan input. Apabila medan mendapat fokus, ia mengosongkan atribut pemegang tempatnya, menjadikan teks pemegang tempat hilang. Sebaliknya, apabila medan hilang fokus, teks pemegang tempat dipulihkan.

Kesimpulan

Dengan melaksanakan salah satu penyelesaian yang disediakan, sama ada menggunakan CSS atau jQuery, anda boleh dengan berkesan mencapai penyembunyian automatik teks pemegang tempat pada fokus, sekali gus meningkatkan pengalaman pengguna merentas penyemak imbas yang berbeza, termasuk Chrome.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Teks Pemegang Tempat Auto-Sembunyikan pada Fokus dalam Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!