Bagaimana untuk Kembangkan Medan Input Teks HTML pada Ketukan Kekunci Tanpa JavaScript?

Memperluas Medan Input Teks HTML pada Ketukan Kekunci Tanpa JavaScript

Meluaskan saiz medan input teks sebagai pengguna jenis adalah keperluan biasa untuk borang kemasukan teks. Walaupun penyelesaian JavaScript atau jQuery sering digunakan, teknik CSS dan HTML tulen boleh mencapai kefungsian ini.

Salah satu pendekatan ialah menggunakan atribut boleh diedit kandungan pada elemen span, membolehkan pengguna mengedit kandungan secara langsung. Atribut ini membenarkan elemen untuk dianggap sebagai kawasan teks boleh diedit. Dengan menetapkan sifat lebar maksimum bagi elemen div yang mengandungi, anda boleh menentukan lebar maksimum yang boleh dicapai oleh medan input semasa pengembangan.

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>

Dengan melaksanakan teknik ini, anda boleh mencipta medan input teks yang berkembang secara automatik apabila pengguna memasukkan lebih banyak teks, sehingga lebar maksimum yang ditentukan, tanpa memerlukan JavaScript atau jQuery.

Atas ialah kandungan terperinci Bagaimana untuk Kembangkan Medan Input Teks HTML pada Ketukan Kekunci Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!