Trik Komputer: What is the Specific of Contenteditable!

Kamis, 07 Februari 2013

What is the Specific of Contenteditable!

Mari kita belajar mencermati sesuatu hal! Baca dahulu artikel berikut Transform Browsers into Notepad++. Jika sobat perhatikan pasti akan melihat satu element mencolok yakni Content Edit able. Untuk beberapa waktu sekarang, kita telah menggunakan berbagai teknologi untuk mengedit dan menyimpan teks dalam browser web. Sekarang dengan atribut contentEditable membuat sesuatu hal jauh menjadi lebih mudah. Pada artikel ini, mari kita lihat cara kerjanya, dan bagaimana kita dapat mengambil hal-hal lebih lanjut.

Syntax

<element contenteditable="true|false|inherit">

Attribute Values

Value	Description
true	Menentukan bahwa elemen tersebut dapat diedit
false	Menentukan bahwa elemen tersebut tidak dapat diedit
inherit	Menetapkan bahwa elemen dapat diedit jika its parent is

A simple example:

<!DOCTYPE html>
<html>
  <body>
    <div contenteditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html>

Live examples

Everything contained within this p is editable in browsers that support HTML5. Go on, give it a try click it and start typing.

Everything contained within this div is editable in browsers that support HTML5. Go on, give it a try click it and start typing.

Koben akan menunjukkan satu teknik yang sangat mengagumkan untuk membuat element div untuk bekerja seperti Textarea Sobat tahu Facebook, Twitter menggunakan div seperti Text Area. Di Facebook dan Twitter itu digunakan untuk posting Status dan banyak hal lainnya.

Use a Div like a Text-Area or Text-Box using CSS3, HTML5

Lakukan grab pada teks/gambar kemudian masukan ke dalam kotak yang tersedia. Jika teks akan bisa kita rubah kata²nya, dan pada gambar dapat berubah panjang & tinggi :)
Default form diatas hanya merupakan contoh gambaran aplikasi. Kalau mau yg sesungguhnya silahkan buat sesuai kebutuhan. Here for look code TheCodePress
Happy Content Editable \m/

Trik Komputer