Contenteditable Implementing Editable HTML tags

Recently, I had a little problem with my work, so I learned the new tag attribute--contenteditable.

What I need to achieve is a phone-side interface that is particularly simple for a page, such as;

The first thing I think about in my mind is a form form and then it's wrapped in a textarea tag so simple, thinking that the interface can be done in 10 minutes at most.

Then open the editor and I'll start writing the code as follows;

<form class= ' textbox ' action= ' "method=" post "> <textarea name=" "rows=" Ten "cols=" > Please write down your description </textarea >   <input type= "Submit" Name= "Finish" id= "Finish" value= "Finish"/> <input type= "button" name= "Cancel" id= " Cancel "value=" cancels "/></form>

Simply write a good style and then open the browser to switch to mobile phone mode to run, the results of a single eye to find the problem, the textarea label of the width of the high can not be self-adaptive ... I explored and tried some of the narrow knowledge I had learned and found ... or Baidu a bit (/(ㄒoㄒ)/~~)

Search results The first is the HTML5 global contenteditable attribute, has not seen this property before opened to look at, unexpectedly found relatively simple and very useful.

Contenteditable This property is so fun, add this property after the HTML tag and give the property value to True, the dead tag is magically editable, and the compatibility is very good (IE6 has been disjointed so did not test), Later thought might use this should have the QQ space bar, opened to see the next is not textarea, with a div to increase the properties of contenteditable implementation.

With the help of the new understanding of the properties and simple CSS style quickly realized I want to effect, when you use to find the cursor when you click to start editing there will be a border, and simple border:none does not realize the role of clear borders, this time to add a simple set of code tags to the tag can be:

-webkit-tap-highlight-color:rgba (0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;

Outline:none;

Contenteditable This new attribute is like a key to open the closed tag of the editor door, and maybe later like me will probably use it, so write here to share to everyone, I hope you can also learn from each other.

Contenteditable Implementing Editable HTML tags