HTML5 - New Common Attributes
Published in：2015-03-02 | Category： Frontend
Words: 503 | Reading time: 3min

HTML5 adds new common attributes for original HTML Tag, and these attributes enhances the HTML elements’s function.

contentEditable

The contentEditable attribute supports most tags. The browser allows user edits the content of element if this attribute is set to true. These elements is not like input or textarea tags. They are not support editable content like table, div, span and so on these tags.

contentEditable attribute can be inherited by children tags. If the contentEditable is true, all children tags’s contentEditable will be true except we define it to false. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<head>
    <title>contentEditable</title>
    <style>
        div {
            width: 240px;
            height: 150px;
        }
        table {
            width:inherit;
            height: 100px;
            border: 1px solid black;
        }
        
        table > tr {
            background-color: blue;
        }
        
        .myDiv {
            width:inherit;
            height: 30px;
            line-height: 30px;
            margin-top:10px;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        var turnOnContentEditable = function() {
            var target = document.getElementById("target");
            target.contentEditable = true;
        };
    </script>
</head>
<body>
   <div id="target" contentEditable="false">
       <table border="1">
           <tr>
               <td>Java</td>
               <td>CSharp</td>
           </tr>
           <tr>
               <td>JavaScript</td>
               <td>Python</td>
           </tr>
       </table>
       <div class="myDiv">
           This is Div Tag
       </div>
   </div>
    <input type="button" onclick="turnOnContentEditable();"value="Turn On Edit Mode"></input>
</body>

The root div is can’t be edited by default. when we click button to turn on contentEditable attribute. all children tags of this tag can be edited.

contentEditable attribute is false:

contentEditable attribute is true:

designMode

designMode attribute is actually entire document’s contentEditable. If we turn on the designMode attribute of the entire page, all the elements which supports contentEditable attributes can be edited. It is false by default.

We can just use javascript to turn on the document’s designMode. 

1
document.designMode = "on";

hidden

HTML5 supports hidden attribute for all elements. The hidden attribute can be set to ‘false’ and ‘true’ both values. The browser doesn’t display the element when hidden = 'true'.

The hidden = 'true' actually like we write display:none is CSS file. And also we can get its value by hidden.

spellcheck

HTML5 add new attributes spellcheck for editable elements like input,textarea, … The spellcheck can be set to ‘true’, ‘false’ both values. The browser will check the content user input and prompt error message for spell error words when it is set to ‘true’. 

<input type="text" spellcheck="true"/>

Note: Supports spellcheck attribute’s browsers include Chrome, Opera, Safari, the IE, FireFox doesn’t support it for now.

HTML5
Prev:
A nice web design tool - Bracket
Next:
HTML5 - New Common Elements

    • Copyright © 2013 - 2024 Andrewsy