Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menyembunyikan Medan Teks dalam Elemen Input Fail?

Bagaimana untuk Menyembunyikan Medan Teks dalam Elemen Input Fail?

Susan Sarandon
Susan Sarandonasal
2024-12-11 20:21:11390semak imbas

How to Hide the Text Field in File Input Elements?

Menyembunyikan Medan Teks dalam Elemen Input Fail

Elemen input fail biasanya memaparkan kedua-dua medan teks dan butang untuk menyemak imbas fail. Walau bagaimanapun, sesetengah senario memerlukan antara muka butang sahaja tanpa sebarang medan teks yang boleh dilihat.

Penyelesaian:

Untuk mencapai matlamat ini, anda boleh menggunakan pendekatan berikut:

  1. Buat input fail yang tidak kelihatan (tersembunyi) elemen:

    <input type="file">
  2. Tambahkan butang yang boleh dilihat yang mencetuskan elemen input fail tersembunyi:

    <input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Apabila butang diklik, ia mencetuskan peristiwa klik elemen input fail tersembunyi, membenarkan pengguna memilih fail tanpa melihat medan teks.

Teknik ini berfungsi dengan berkesan untuk senario di mana nilai input fail tidak diperlukan, seperti dalam skrip muat naik berbilang fail. Ia meningkatkan antara muka pengguna dengan meminimumkan elemen yang tidak perlu, menghasilkan bentuk yang lebih diperkemas dan mesra pengguna.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Medan Teks dalam Elemen Input Fail?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn