The contentEditable attributes is used to make the text of an element as editable. Now create a Web page named contentEditableattribute.html which shows the use of the contentEditable attribute.
// Web page name is contentEditableattribute.html
<!doctype html>
<head>
<title>HTML 5 contentEditable Example </title>
<SCRIPT>
function getUserScribble()
{
var scribble='<i style="color:magenta;font-family:Geneva, Arial;font-size:5;">Write here.....</i>';
document.getElementById('scribble').innerHTML=scribble;
}
</SCRIPT>
</head>
<body onload="getUserScribble()">
<p>
<table width=320 height=450 border=0 cellspacing=0 cellpadding=62>
<td background="nature1.jpg" contentEditable="true" id="scribble"></td>
</table>
<SCRIPT>getUserScribble();
</SCRIPT>
<p>
</body>
</html>
Here :- An image is loaded which provides a text area for editable text. The editable text is created by setting the value of the contentEditable attribute to true.
The output of Above Web page is:
Above output shows a picture that provides you with an area to write your message.
// Web page name is contentEditableattribute.html
<!doctype html>
<head>
<title>HTML 5 contentEditable Example </title>
<SCRIPT>
function getUserScribble()
{
var scribble='<i style="color:magenta;font-family:Geneva, Arial;font-size:5;">Write here.....</i>';
document.getElementById('scribble').innerHTML=scribble;
}
</SCRIPT>
</head>
<body onload="getUserScribble()">
<p>
<table width=320 height=450 border=0 cellspacing=0 cellpadding=62>
<td background="nature1.jpg" contentEditable="true" id="scribble"></td>
</table>
<SCRIPT>getUserScribble();
</SCRIPT>
<p>
</body>
</html>
Here :- An image is loaded which provides a text area for editable text. The editable text is created by setting the value of the contentEditable attribute to true.
The output of Above Web page is:
Above output shows a picture that provides you with an area to write your message.
No comments:
Post a Comment