Bolehkah Medan Input Teks HTML Berkembang Secara Automatik Tanpa JavaScript?

Cara Membuat Medan Input Teks HTML Berkembang Secara Automatik semasa Anda Menaip

Masalah:

Pengguna sering memerlukan medan input teks yang boleh menyesuaikan diri dengan panjang teks yang mereka masukkan. Walaupun anda boleh menetapkan CSS saiz awal, adalah ideal untuk memajukan medan secara automatik, mengembang sehingga lebar maksimum. Menentukan sama ada keupayaan ini boleh dicapai dalam HTML dan CSS, sebaik-baiknya tanpa JavaScript, adalah penting.

Penyelesaian:

Anehnya, adalah mungkin untuk mencipta medan input teks yang semakin meningkat hanya menggunakan CSS dan atribut contenteditable:

CSS:

<code class="css">span {
    border: solid 1px black;
}

div {
    max-width: 200px;
}</code>

HTML:

<code class="html"><div>
    <span contenteditable="true">sdfsd</span>
</div></code>

Penjelasan:

Atribut contenteditable membolehkan pengguna mengedit teks dalam elemen span. Sifat max-width pada elemen div memastikan medan tidak melebihi lebar yang ditentukan (200px dalam contoh ini). Apabila pengguna menaip, elemen span secara automatik berkembang untuk menampung teks yang ditambah, sehingga lebar maksimum.

Nota tentang Contenteditable:

Adalah penting untuk diingat bahawa menggunakan contenteditable membolehkan pengguna menampal elemen HTML ke dalam medan. Pertimbangkan perkara ini semasa membuat keputusan sama ada hendak menggunakan pendekatan ini.

Atas ialah kandungan terperinci Bolehkah Medan Input Teks HTML Berkembang Secara Automatik Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!