Tetapkan atribut contenteditable untuk mengedit kandungan tag HTML (boleh menggantikan textarea)_HTML/Xhtml_Web page production

Salin kod

Kodnya adalah seperti berikut:

Jika anda menambah contenteditable="true" pada BODY, anda dapat melihat betapa ajaibnya atribut ini. Oleh itu, kita boleh menetapkan atribut contenteditable="true" kepada teg HTML dan teg boleh diedit.

Atribut boleh diedit kandungan serasi dengan semua penyemak imbas (keserasian versi sebelum IE6 belum diuji)

Dalam sesetengah kes, kita boleh menggunakan DIV untuk menggantikan input atau textarea untuk mencapai kesan yang sama Contohnya, apabila menggunakan ajax, kita boleh mendapatkan kandungan DIV apabila menyerahkan borang.

Orang yang berhati-hati akan mendapati bahawa kotak teks untuk menyiarkan ulasan dalam ruang QQ sebenarnya adalah DIV, bukan kotak teks kawasan teks.

Cara Div CSS mensimulasikan kebolehsuaian ketinggian kawasan teks untuk memenuhi atribut boleh diedit kandungan standard HTML5

Kesan ini dicapai terutamanya dengan menambahkan atribut boleh diedit kandungan dalam HTML5 pada teg (boleh diedit: menentukan sama ada pengguna dibenarkan mengedit kandungan Apa yang menarik ialah IE juga menyokong atribut ini, jadi anda tidak perlu risau juga). banyak tentang isu keserasian.
DEMO:

Salin kod

Kodnya adalah seperti berikut:

　

　

Lampiran:

Di bawah pelayar FF, apabila bekas mendapat fokus, ketinggian kursor akan sama dengan ketinggian bekas atau kursor tidak akan dipaparkan pada masa ini, jika pemegang tempat ditambahkan pada bekas secara lalai, seperti
atau  boleh menyelesaikan masalah ini.

Kini Yuzi akan memperkenalkan kepada anda satu lagi kaedah yang baik yang boleh diedit dan boleh menyesuaikan ketinggian secara automatik tanpa menambah js kod. Biarkan semua orang membuka mata mereka, Yuzi boleh menggunakan DIV secara langsung sebagai kotak teks, sama seperti kotak teks TextArea Lebih penting lagi, pengalaman pengguna DIV lebih sempurna dan kacak.

Atribut contentEditable dalam Html boleh menghidupkan keadaan boleh diedit bagi elemen tertentu. Mungkin anda tidak pernah menggunakan atribut contentEditable, atau pernah mendengarnya Peranan contentEditable agak ajaib. Anda boleh membuat div atau keseluruhan halaman web, serta span dan elemen lain boleh ditulis. Kandungan teks input yang paling biasa digunakan ialah input dan textarea Selepas menggunakan atribut contentEditable, anda boleh memasukkan kandungan dalam div, table, p, span, body dan banyak elemen lain. Khususnya, contentEditable telah disokong dengan berkesan dalam standard html5. Datang dan saksikan.

Selepas menetapkan atribut contentEditable="true", bukankah ia agak ajaib? Haha...

Halaman DEMO:
http://demo.jb51.net/js/2014/ContentEditable/

Mari lakukan kesan khas Dengan mendayakan penyuntingan elemen div, sama ada kita boleh memasukkan imej, ini memerlukan penggunaan js.

Salin kodKod tersebut adalah seperti berikut:

function img (){
var location1 = prompt("Sila masukkan alamat imej:","http://");
if(location1){
selImg(location1);
}
}
fungsi selImg(s){
if(!s){return false;}
var h=s.substr(s.lastIndexOf(".") 1,3 );
if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
Edit=document.getElementById("idEdit ")
Edit.innerHTML =''
}
lain{
}
}

< ;div NAME=EditCtrl id=idEdit contentEditable=true style="max-width:90%"> Yuzi.me

Bagus, jika anda ingin menggunakan lebih banyak kesan, anda perlu menulis kod js sendiri. Saya berharap semua wira pengepungan akan melakukan yang terbaik dan tidak sabar untuk berkongsi!