Gunakan contentEditable dalam HTML5 untuk meningkatkan ketinggian petua tutorial text_html5 berbilang baris secara automatik

contentEditable ialah harta global yang dibangunkan oleh Microsoft, dinyahkompilasi dan digunakan oleh penyemak imbas lain. Fungsi utama atribut ini adalah untuk membolehkan pengguna mengedit kandungan dalam elemen, jadi elemen mestilah elemen yang boleh mendapatkan fokus tetikus, dan karet mesti diberikan kepada pengguna selepas mengklik tetikus untuk menggesa pengguna bahawa kandungan dalam elemen dibenarkan untuk disunting. Sifat contentEditable ialah sifat Boolean yang boleh ditentukan sebagai benar atau palsu.

Selain itu, atribut ini juga mempunyai keadaan warisan tersembunyi Apabila atribut itu benar, elemen itu ditetapkan sebagai membenarkan pengeditan apabila atribut itu palsu, elemen itu ditetapkan sebagai tidak membenarkan penyuntingan apabila benar atau tidak Apabila palsu, ia ditentukan oleh keadaan warisan Jika elemen induk bagi elemen boleh diedit, elemen itu boleh diedit.

Selain itu, sebagai tambahan kepada atribut contentEditable, elemen juga mempunyai atribut isContentEditable Apabila elemen boleh diedit, atribut ini adalah benar apabila elemen tidak boleh diedit, atribut ini adalah palsu.
Berikut ialah contoh menggunakan atribut Boleh Diedit kandungan Apabila atribut Boleh Diedit kandungan ditambahkan pada elemen senarai, Pembaca boleh mencuba contoh ini dalam penyemak imbas.

Kod XML/HTMLSalin kandungan ke papan keratan

1. > 
2. <kepala> 
3. <meta charset="UTF- 8"> 
4. <tajuk>conentEditalbe contoh atribut tajuk> 
5. kepala> 
6. <h2>Senarai yang boleh diedit h2> 
7. <ul kandungan Boleh Diedit="benar" > 
8. <li>Senaraikan elemen 1 li> 
9. <li>Senaraikan elemen 2 li> 
10. <li>Senaraikan elemen 3 li> 
11. ul> 

Hasil selepas menjalankan kod ini adalah seperti yang ditunjukkan di bawah:

Teks baris secara automatik meningkat dalam ketinggian

Apabila bercakap tentang kotak teks berbilang baris, semua orang akan segera memikirkan menggunakan textarea adalah sangat mudah, tetapi terdapat satu kelemahan Anda hanya boleh menentukan bilangan perkataan dalam lajur dan baris yang sepadan atau terus menggunakan CSS untuk meningkatkan ketinggian.

Peningkatan automatik masih diperlukan pada masa tertentu, seperti kotak input yang serupa dengan siaran di Weibo, yang merupakan keperluan biasa: kotak teks mempunyai ketinggian lalai, dan apabila teks input melebihi ketinggian ini, ia akan meningkat secara automatik . Mesti ada had maksimum Selepas melebihi had ini, bar skrol menegak akan muncul.

Jika anda menggunakan textarea untuk melengkapkan keperluan ini, anda juga perlu bekerjasama dengan js untuk memantau perubahan dalam ketinggian teks untuk menukar ketinggian kotak teks secara dinamik Ini sangat menyusahkan, terutamanya pada bahagian mudah alih, yang tidak saintifik. Pada masa ini, Anda boleh menggunakan atribut contenteditable.

Contohnya:

Kod XML/HTMLSalin kandungan ke papan keratan

1. <div boleh diedit="benar" kelas="kotak" id="kotak" >
2.                                                        
3. div>
4. <gaya>
.box{width:200px;max-height:100px;border:1px solid #ccc;overflow-y:auto;overflow-x:hidden;}
6. gaya>

Selagi nilai atribut boleh diedit kandungan dinyatakan sebagai benar, div akan menjadi boleh diedit dan ketinggian akan meningkat secara automatik apabila kandungan meningkat. Kemudian kami memberikan ketinggian maksimum kepada div untuk mencapai keperluan di atas.