Learning HTML 5 – contenteditable atribute

Without a doubt HTML5 brought us a great bagage of new features. One not so talked about, but seriously important is contenteditable.

This atribute contains 2 possible values, TRUE or FALSE and this makes the content in a defined tag to be editable by the user, for example: <h1 id=”title” contenteditable=”true”>JWebCoder</h1>

So, how to use it

Lets make a simple index.html file:

<html>
    <head>
        <title>JWebCoder</title>
    </head>
    <body>
        <h1 id="title" contenteditable="true">JWebCoder</h1>
        <a href="javascript:" onClick="checkContent();">Check Content</a>
    </body>
</html>

Now lets add the checkContent() javascript function to the body:

<script type="text/javascript">
function checkContent(){
    $value = $('#title').html();
    alert($value);
}
</script>

Now when you edit the h1 content and click Check Content you will see that you have edited the h1 tag and you can even retrieve it whit some really simple jquery code.

Imagine now what you can achieve with this.

Had some ajax to it and a little post php script, create you’r own WYSIWYG editor, just go and try it out :).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s