#How to #HTML5

Sometime making a text element editable makes sense such as div , span or p than having to create a text input field.

We can do the same using the contenteditable attribute of those elements.^_^

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        div {
            cursor: pointer;
        }

        div:focus {
            cursor: text;
        }
    </style>
</head>

<body>
    <div contenteditable="true">This is editable!</div>
</body>

Tip: It comes really handy with one-way binding situations with frameworks like Angular/React/Vue.\O/

Note: contenteditable attribute is only available in HTML5 O_o

#How to #HTML5