Learn the feature of HTML to make your content editable

Learn the feature of HTML to make your content editable

The new property content editable=”true” makes the continent editable in html mode. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

  • Break mechanical cab driver.
  • Drive to abandoned factory
  • Watch video of self

Restrict user to select only image from input type file.

It only shows the image when you click on the browse button on this file type field. By using this you can restrict the user to select particular file format.

  • All sound files are accepted Audio/*
  • All video files are accepted Video/*

To specify more than one value, separate the values with a comma

Local Storage

Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.

    • First we need to create an html file in our local system.
    • Second include jQuery in header tag

  • Third add html given below in body tag.
  • add text

 

As explained before content editable attribute provide edit option in browser.

For local storage we need to use JavaScript function.
localStorage.setItem (variable name, pass the value to store in the variable)
This function stores the data in variable at our local system.
To retrieve data from this variable we need to use second JavaScript function
localStorage.getItem (“variable name”);
Here we need to pass variable as name as argument and it will return the local storage variable value.

Add the following javascript code in head tag.
$(function ()
{
$(“#editContent”).blur (function ()
{
localStorage.setItem(“mydata”,$(“#editContent”).html());
});
If (localStorage.getItem(“mydata”))
{
$(“#editContent”).html (localStorage.getItem(“mydata”));
}
});

Run the code as see the result.

What is Not HTML5?

1. SVG: Not HTML5. It’s at least five years old.
2. CSS3: Not HTML5. It’s…CSS.
3. Geolocation: Not HTML5.
4. Client Storage: Not HTML5. It was at one point, but was removed from the spec, due to the fact that many worried that it, as a whole, was becoming too complicated. It now has its own specification.
5. Web Sockets: Not HTML5. Again, was exported to its own specification.

Latest Blogs