HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note!(用HTML5创建一个网页便利贴...

http://www.daqianduan.com/html5-web-post-it/

https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_of_contenteditable_and_localstorage_create_a_web_sticky_note?lang=en

在这篇文章里我将研究HTML5上2个新的功能：contenteditable 和 localStorage。当我看了HTML5、W3C规范说明后，我迫不及待的要在这同一个程序上写出例子来演示这些新功能。

View Code

1 < html >
2 < head >
3 < title > HTML5 contenteditable example < / title>
4
5 < style type = " text/css " >
6 #scribble - pad {
7 margin - left:auto;
8 margin - right:auto;
9 height: 475px;
10 width: 475px;
11 background - image:url(https: // www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg);
12 background - repeat: no - repeat;
13 }
14
15 #scribble {
16 height: 300px;
17 width: 300px;
18 padding: 120px 100px 100px 75px;
19 color: # 486891 ;
20 font - family: Arial,sans - serif;
21 font - size: 140 % ;
22 font - style: italic;
23 font - weight:bold;
24 line - height: 1 .5em;
25 }
26
27 #c - link {
28 color: # 486891 ;
29 font - family: Arial,sans - serif;
30 font - size: 95 % ;
31 font - weight:bold;
32 text - decoration: none;
33 }
34 < / style>
35
36
37
38 < script >
39 function storeUserScribble(id) {
40 var scribble = document.getElementById( ' scribble ' ).innerHTML;
41 localStorage.setItem( ' userScribble ' ,scribble);
42 }
43
44 function getUserScribble() {
45 if ( localStorage.getItem( ' userScribble ' )) {
46 var scribble = localStorage.getItem( ' userScribble ' );
47 }
48 else {
49 var scribble = ' You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog! ' ;
50 }
51 document.getElementById( ' scribble ' ).innerHTML = scribble;
52 }
53
54 function clearLocal() {
55 clear: localStorage.clear();
56 return false ;
57 }
58 < / script>
59
60 < / head>
61 < body >
62
63 < a id = " c-link " href = '' onclick = ' clearLocal(); ' > Clear local storage < / a>
64
65 < div id = " scribble-pad " >
66 < div id = " scribble " contenteditable = " true " onkeyup = storeUserScribble( this .id) >
67 < / div>
68 < / div>
69
70
71 < script >
72 getUserScribble();
73 < / script>
74
75 < / body>
76 < / html>

转载于:https://www.cnblogs.com/guopei/articles/1984840.html