In-Place Editing with content editable in Html5

 In-Place Editing with content editable in Html5

we’re always looking for ways to make it easier for people to interact with our applications. Sometimes we want a user of our site to edit some information about themselves without having to navigate to a different form. We traditionally implement in-place editing by watching text regions for clicks and replacing those regions with text fields In-Place Editing with content editable. These fields send the changed text back to the server via Ajax. HTML5’s In-Place Editing with content editable tag takes care of the data-entry part automatically. We’ll still have to write some JavaScript to send the data back to the server so we can save it, but we no longer have to create and toggle hidden forms With In-Place Editing content.

One of AwesomeCo’s current projects lets users review their account profile. It displays their name, city, state, postal code, and email ad- dress. Let’s add some in-place editing to this profile page so that we end up with an interface on the next In-Place Editing with content editable.

Before we get started, I want you to know that implementing a feature that relies on JavaScript without first implementing a server-side solution goes against everything I believe in when it comes to building accessible web applications. We’re doing it this way here because I want to focus on the features of the content editable attribute, and this is not production code . Always, and I mean always, build the solution that does not require JavaScript, then build the version that relies on scripting, and finally be sure to write automated tests for both paths so that you’re more likely to catch bugs if you change one version and not the other In-Place Editing with content editable.

The Profile Form In-Place Editing with content editable in Html5

HTML5 introduces the content editable attribute that is available on almost every element. Simply adding this attribute turns it into an editable field.

<h1>User information</h1>
<div id="status"></div> 
<ul> 
<li> 
<b>Name</b> 
<span id="name" contenteditable="true"> Hugh Mann </span> 
</li> 
<li> 
<b>City</b> <span id="city" contenteditable="true"> Anytown</span>
</li>
<li> 
<b>State</b> <span id="state" contenteditable="true"> OH</span>
</li> 
<li>
<b>Postal Code </b> <span id="postal_code" contenteditable="true"> 92110</span>
</li>
<li> 
<b>Email</b> <span id="email" contenteditable="true"> [email protected]</span> 
</li>
</ul>

we can style this up with some CSS too. We’ll use some CSS3 selectors to identify the editable fields so they change color when our users hover over or select them In-Place Editing with content editable.

ul{list-style:none;}

  li{clear:both;}
  li>b, li>span{ 
display: block; 
float: left; - width: 100px; - }
li>span{ 
  width:500px; 
  margin-left: 20px; 
} 
li>span[contenteditable=true]:hover{
  background-color: #ffc; 
}
li>span[contenteditable=true]:focus{ 
  background-color: #ffa; 
  border: 1px shaded #000; 
 }

That’s it for the front end of  In-Place Editing with content editable in Html5 . Users can modify the data on the page easily. Now we have to save it.

Persisting the Data In-Place Editing with content editable

Although the users can change the data  In-Place Editing with content editable in Html5 , their changes will be lost if they refresh the page or navigate away. W e need a way to submit those changes to our back end, and we can do that easily with jQuery. If you’ve ever done any Ajax before, this won’t be anything new to you In-Place Editing with content editable.

$(function(){ 
var status = $(
"#status" );
$( "span[contenteditable=true]" ).blur(function(){
 var field = $( this).attr( "id" ); 
var value = $( this).text(); $.post( "http://localhost:4567/users/1" , 
field + "=" + value, 
function(data){ 
status.text(data); 
} 
); 
});
});

we’ll add an event listener to every span on the page that has the content editable attribute set to true. Then, all we have to do is submit the data to our server-side script In-Place Editing with content editable.
Falling Back With In-Place Editing content with editable
We’ve done a bunch of things that won’t work for some of our audience. First, we’ve created a dependency on JavaScript to save the edited results back to the server, which is a Bad Thing. Next, we’re using the focus pseudo class to highlight the fields when they receive focus, and some versions of IE don’t support that. Let’s handle the functionality first  In-Place Editing with content editable in Html5 , and then we’ll deal with the visual effects.
Creating an Edit P a g e Rather than worrying too much about various situations that might prevent a user from using our technique, let’s just give them the option to go to a separate page with its own form. Sure, it’s more coding, but think about the possible scenarios:
• A user doesn’t have JavaScript turned on and is using Internet Explorer  In-Place Editing with content editable in Html5
• A user doesn’t have an HTML5-compatible browser  In-Place Editing with content editable in Html5 .
• A user is using the latest Firefox with HTML5 support but still disabled JavaScript simply because they don’t like JavaScript (it happens all the time…more than you’d think).
When it comes down to it, making a form that does a POST to the same action that handled the Ajax update makes the most sense. How you do this is up to you, but many frameworks let you detect the type of request by looking at the accept headers to determine whether the request came from a regular POST or an XMLHttp Request. That way, you keep the server-side code DRY. 5 W e will hide the link to this form if the browser supports content editable and JavaScript  In-Place Editing with content editable in Html5 .
So, create a new page called edit.html, and code up a standard edit form that posts to the same update action that our Ajax version uses In-Place Editing with content editable.

<!DOCTYPE html> <html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Editing Profile</title> 
<link href="style.css" rel="stylesheet" media="screen"> 
</head>
 <body>
 <form action="/users/1" method="post" accept-charset="utf-8">
 <fieldset id="your_information"> 
<legend>Your Information</legend> 
<ol>
 	<li>
	 <label for="name">Your Name </label>
 	<input type="text" name="name" value="" id="name"> 
	</li>
	 <li> <label for="city">City </label>
 <input type="text" name="city" value="" id="city"> 
	</li>
 	<li>
 <label for="state">State </label>
 <input type="text" name="state" value="" id="state"> 
	</li>
 	<li> 
<label for="postal_code">Postal Code </label>
 <input type="text" name="postal_code" value="" id="postal_code"> 
	</li>	
	 <li> 
<label for="email">Email </label>
 <input type="email" name="email" value="" id="email"> 
	</li>
 	</ol>
</fieldset>
<p><input type="submit" value="Save"></p> 
</form>
</body>
 </html>

Then add a link to this page on show html   In-Place Editing with content editable in Html5 .

<h1>User information</h1> 
<section id="edit_profile_link"> 
<p><a href="edit.html">Edit Your Profile</a></p> 
</section>
<div id="status"></div>

The Future of In-Place Editing with content editable in Html5
Right now, if you add a JavaScript-based date picker to your site, your users have to learn how it works. If you’ve ever shopped online for plane tickets and made hotel reservations, you’re already familiar with the different ways people implement custom form controls on sites. It’s akin to using an ATM—the interface is often different enough to slow you down  In-Place Editing with content editable in Html5 .
Imagine, though, if each website used the HTML5 date field, and the browser had to create the interface. Each site a user visited would dis-play the exact same date picker. Screen-reading software could even implement a standard mechanism to allow the blind to enter dates easily. Now think about how useful placeholder text and auto focus can be for users once it’s everywhere. Placeholder text can help screen readers explain to users how form fields should work, and auto focus could help people navigate more easily without a mouse, which is handy for the blind but also for users with motor impairments who may not use the mouse.
The ability for developers to turn any element into an editable region makes it easy to do in-place editing, but it could potentially change how we build interfaces for content management systems.
The modern W e b is all about interactivity, and forms are an essential part of that interactivity. The enhancements provided by HTML5 give us a whole new set of tools we can use to help our users In-Place Editing with content editable.

andcombd