ในบทความนี้ ฉันจะตรวจสอบคุณสมบัติใหม่สองประการใน HTML5: contenteditable และ localStorage หลังจากที่ฉันอ่านข้อกำหนด HTML5 และ W3C แล้ว ฉันแทบรอไม่ไหวที่จะเขียนตัวอย่างในโปรแกรมเดียวกันเพื่อแสดงคุณสมบัติใหม่เหล่านี้
ในขณะที่คุณกำลังดูตัวอย่าง HTML 5 ที่ฉันเขียนไว้ก่อนหน้านี้ ฉันกำลังคิดที่จะสร้างตัวอย่างที่เรียบง่ายแต่ใช้งานได้เพื่อใช้คุณสมบัติ HTML5 ใหม่เหล่านี้ในรูปแบบที่แปลกใหม่ยิ่งขึ้น เป้าหมายของฉันไม่ใช่เพียงสาธิต HTML 5 API เหล่านี้ แต่เพื่อใช้ตัวอย่างเพื่อแสดงให้นักพัฒนาเห็นว่าจะใช้งาน API เหล่านี้ได้อย่างไรในทางปฏิบัติและเป็นนวัตกรรมใหม่
ในช่วงกลางทศวรรษ 1990 ฉันได้จดทะเบียนสิทธิบัตรซอฟต์แวร์ ซึ่งก็คือ "บันทึกย่อช่วยเตือนเว็บ" เพื่ออธิบายให้เข้าใจง่ายที่สุด มันสามารถสร้าง "กระดาษโน้ตสีเหลือง" ที่ติดอยู่บนหน้าเว็บของคุณได้ เช่นเดียวกับเอฟเฟกต์ที่คุณติดไว้บนจอคอมพิวเตอร์ในชีวิตจริง ความสามารถในการแก้ไขเนื้อหาของ HTML5 และความสามารถในการจัดเก็บในเครื่องทำให้การสร้างบันทึกย่อบนเว็บทำได้ง่ายและรวดเร็ว!
สาธิตการใช้งานโปรแกรม:
ใช้เมาส์คลิกบนพื้นที่บันทึกย่อช่วยเตือนและพิมพ์ข้อมูล โปรแกรมนี้จะจัดเก็บข้อมูลทั้งหมดที่คุณพิมพ์ลงในที่จัดเก็บในตัวเครื่อง (ไม่ใช่ในคุกกี้) เมื่อคุณกลับมาที่หน้านี้ ข้อมูลโพสต์อิทของคุณจะจดจำสิ่งที่คุณเขียนครั้งล่าสุด โปรดทราบว่าไม่มีเบราว์เซอร์ใดที่ใช้งาน HTML5 ได้อย่างสมบูรณ์ ตัวอย่างนี้จำเป็นต้องทำงานบนเบราว์เซอร์ที่รองรับ HTML5 เช่น Firefox 3.5 หรือสูงกว่า
วิธีการหลักในการใช้งาน localStorage นั้นเรียบง่าย เช่นนี้:
ฟังก์ชั่น storeUserScribble (id) {
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble', การเขียนลวก ๆ);
-
ฟังก์ชั่น getUserScribble(){
ถ้า (localStorage.getItem('userScribble')){
var scribble = localStorage.getItem('userScribble');
-
อื่น {
var scribble = ' < font color = blue face = ”Geneva, Arial” size = 6 >< i > คุณสามารถเขียนอะไรก็ได้ที่คุณต้องการบนกระดาษโน้ตนี้...แล้วคุณจะเห็นฉันจำได้ในครั้งต่อไปที่คุณเยี่ยมชมบล็อกของฉัน ข้อมูลที่คุณป้อน! < / / i& gt; < / แบบอักษร > ';
-
document.getElementById('scribble').innerHTML = scribble;
-
ฉันเลือกที่จะวางแอตทริบิวต์ที่แก้ไขเนื้อหาได้และเหตุการณ์ onkeyup ไว้ที่ <td>:
| < td พื้นหลัง =”” contenteditable =”true” id =”scribble” onkeyup =”storeUserScribble(this.id)” ></ td > |
สามารถดาวน์โหลดโค้ด HTML ที่สมบูรณ์ในตัวอย่างได้ที่นี่
ในตัวอย่างนี้ บันทึกย่อช่วยเตือนสามารถปรับขนาดได้ สร้างบันทึกย่อช่วยเตือนขนาดเล็กแล้ววางไว้บนหน้าเว็บของคุณ ซึ่งจะเพิ่มฟีเจอร์ที่น่าสนใจให้กับเว็บไซต์หรือเว็บแอปพลิเคชันของคุณ
แหล่งที่มาภาษาอังกฤษ: HTML5 - ตัวอย่างโค้ดของ ContentEditable และ LocalStorage - สร้างบันทึกย่อสำหรับเว็บ!