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.

Silahkan di Copy Halal 100 %

🎨 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.

Silahkan di Copy Halal 100 %

/* File: styles.css */

/* Pengaturan dasar untuk mempermudah melihat */
body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.container {
    /* Batas lebar maksimum untuk konten formulir */
    max-width: 800px;
    margin: 0 auto;
}

/* --- Kunci untuk Textarea Responsif --- */
textarea {
    /* 1. Mengatur lebar 100% dari elemen induk (.container) */
    width: 100%; 
    
    /* 2. Menentukan lebar minimum (misalnya 300px) agar tidak terlalu kecil di layar super kecil */
    min-width: 300px;

/* 3. Memberi tinggi yang cukup */
    height: 150px; 
    
    /* 4. Properti ini adalah yang paling penting untuk responsif: */
    /* Menggunakan box-sizing: border-box memastikan padding dan border dihitung 
       DI DALAM lebar 100% sehingga tidak menyebabkan overflow horizontal. */
    box-sizing: border-box; 
    
    /* Penataan visual tambahan */
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
}

/* 5. Mengontrol perubahan ukuran manual oleh pengguna (Resize) */
/* 'vertical' hanya mengizinkan perubahan ukuran vertikal (direkomendasikan) */
/* 'none' menonaktifkan perubahan ukuran (juga pilihan yang bagus) */
textarea {
    resize: vertical; 
}

/* Contoh media query opsional jika Anda ingin menyesuaikan tampilan di layar yang sangat kecil */
@media (max-width: 480px) {
    textarea {
        /* Sedikit menambah tinggi pada layar ponsel untuk pengalaman yang lebih baik */
        height: 200px;
    }
}

✨ 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.

Silahkan di Copy Halal 100 %

💡 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.

Silahkan di Copy Halal 100 %

// File: script.js

function copyText() {
    // 1. Dapatkan elemen textarea
    const textArea = document.getElementById("responsivetext");
    
    // 2. Pilih teks di dalam textarea
    textArea.select();
    
    // Untuk perangkat seluler (opsional): pastikan rentang dipilih
    textArea.setSelectionRange(0, 99999);

function displayMessage(message, isSuccess) {
    const msgElement = document.getElementById("copyMessage");
    msgElement.textContent = message;
    
    // Atur warna pesan
    msgElement.style.color = isSuccess ? 'green' : 'red';

// Hilangkan pesan setelah 3 detik
    setTimeout(() => {
        msgElement.textContent = '';
    }, 3000);
}

💅 3. CSS (Styling Tombol)

Tambahkan sedikit gaya pada file styles.css Anda agar tombol terlihat bagus dan sesuai dengan layout responsif.

Silahkan di Copy Halal 100 %

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