Text Area Responsive

Membuat responsive textarea Versi 0.1 di HTML menggunakan CSS adalah proses yang cukup mudah. Tujuannya adalah memastikan bahwa elemen textarea terlihat bagus dan dapat digunakan di berbagai ukuran layar.

Berikut adalah cara kerjanya, beserta contoh kode CSS dan HTML.

📝 Kode HTML
Pertama, Anda hanya perlu elemen textarea dasar di HTML Anda.
 

🎨 Kode CSS untuk Responsif
Untuk membuat textarea responsif, kita biasanya menggunakan persentase untuk width dan memastikan ia tidak melebihi batas tertentu. Kita juga bisa mengontrol apakah pengguna dapat mengubah ukurannya secara manual.

✨ Penjelasan Detail
width: 100%;: Ini adalah inti dari responsif. Ini memastikan textarea akan selalu menempati seluruh lebar yang tersedia dari elemen induknya (.container).

box-sizing: border-box;: Ini sangat penting. Tanpa ini, padding dan border akan ditambahkan ke lebar 100%, menyebabkan lebar total lebih dari 100% dan seringkali membuat scrollbar horizontal muncul di browser. Dengan border-box, padding dan border berada di dalam lebar 100%.

resize: vertical;: Secara default, browser memungkinkan pengguna untuk menyeret sudut kanan bawah textarea untuk mengubah ukuran horizontal dan vertikal.

Mengatur ke vertical memungkinkan pengguna mengubah tingginya, tetapi mengunci lebarnya (yang sudah kita atur 100%), menjaga tata letak tetap rapi.

Mengatur ke none akan menghilangkan fitur resize sama sekali.

min-width dan max-width (pada .container): Meskipun textarea itu sendiri 100% lebar, kita dapat mengontrol lebar maksimum area tempat ia berada (dalam contoh ini, .container) untuk mencegahnya membentang terlalu jauh di monitor desktop yang sangat besar.

Text Are Versi 2.0

Anda ingin menambahkan fungsi Copy Text (salin teks) pada textarea responsif Anda.

Ini adalah fitur yang sangat berguna, yang biasanya dilakukan menggunakan JavaScript (JS) untuk memicu aksi penyalinan.

Berikut adalah kode yang dibutuhkan, termasuk pembaruan HTML, penambahan JavaScript, dan sedikit CSS untuk tombolnya.

💻 1. Pembaruan HTML (Menambahkan Tombol)
Kita akan menambahkan sebuah tombol di bawah textarea dan memberinya onclick event untuk memanggil fungsi JavaScript.


💡 2. JavaScript (Membuat Fungsi Salin)
Buat file baru bernama script.js dan tambahkan kode berikut. Fungsi ini akan memilih (select) teks di textarea dan mencoba menyalinnya ke clipboard pengguna.

💅 3. CSS (Styling Tombol)
Tambahkan sedikit gaya pada file styles.css Anda agar tombol terlihat bagus dan sesuai dengan layout responsif.

Dengan langkah-langkah ini, Anda sekarang memiliki textarea yang responsif dan memiliki tombol Salin Teks yang berfungsi!

Posting Komentar