אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » contenteditable ו-localStorage ב-HTML5

contenteditable ו-localStorage ב-HTML5

רן בר-זיק ינואר 4, 2011 8:16 am תגובה אחת

הסבר ומדריך לשימוש בשתי תכונות שימושיות של HTML5 שעובדות כבר היום גם באינטרנט אקספלורר.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

קחו את העכבר, תלחצו על הפסקה הזו ותנסו לשנות אותה. כן, כן – פשוט תעשו את זה!

התכונה המגניבה הזו נקראת contenteditable וניתן להשתמש בה בכל הדפדפנים (גם אינטרנט אקספלורר). משתמשים בה באופן פשוט ביותר, ממש ככה:


<p contenteditable="true">קחו את העכבר, תלחצו על הפסקה הזו ותנסו לשנות אותה. כן, כן - פשוט תעשו את זה!</p>

עם התכונה הזו מגיע API שלם בשם The command API שמאפשר לנו לעשות דברים מופלאים עם contenteditable. כמו למשל לאפשר שינוי פונטים, צבעים, דגשים וכו'. לשם דוגמא, נסו לבחור טקסט מהפסקה הזו וללחוץ על אחד הכפתורים.


זה נעשה באמצעות שימוש ב-API. הקוד מאחורי הכפתורים הוא פשוט מאד:


<button onclick="document.execCommand('bold',false,null);">Bold</button>
<button onclick="document.execCommand('italics',false,null);">Italic</button>

כל דפדפן עדיין מממש את ה-commands בדרך שונה במקצת. אפשר לייצר גם commands שמקפיצים שאלה למשתמש כמו למשל URL או צבע. דוגמאות מקיפות אפשר לראות כאן.

כפי שציינתי, חלק מהדפדפנים עדיין מממשים את ה-commands בדרך שונה במקצת ומוקדם עדיין להכריז על מותו של עורך ה-WYSIWYG, אבל זה הכיוון הנכון. התגית עובדת בכל דפדפן שהוא כולל באינטרנט אקספלורר 6 ומעלה.

localStorage

אפשר לשלב את contenteditable עם פיצ'ר נוסף ומגניב של HTML5 בשם localStorage. localStorage מאפשר לנו לשמור ערכים ומידע על גבי הדפדפן בדומה לעוגיות. אפשר להשתמש בו בכל דפדפן כולל באינטרנט אקספלורר 8.

localStorage הוא מאד נוח, הוא בפורמט של key=>value וניתן לשלוף אותו, לשמור עליו ולמחוק אותו.

שמירה

השמירה או היצירה נעשית ב-JavaScript באופן הבא:


localStorage.setItem('KEY', 'VALUE');

ה-KEY הוא השם שאנו נותנים למחסן שלנו וה-VALUE הוא הערך שיכול להיות מערך, משתנה או אפילו innerHTML.

שליפה

שליפה היא מאד פשוטה ונעשית באופן הבא:


var value = localStorage.getItem('KEY');

כאן אנחנו רק צריכים את ה-KEY שעובר למשתנה פשוט בשם value.

מחיקה

מחיקה גם היא פשוטה ביותר:


localStorage.clear('KEY');

או (אם אנו רוצים למחוק הכל) :


localStorage.clear();

להדגמת ה-localStorage, אנו נשתמש בפסקה עם id=main שיש לה תכונת contenteditable. לאחר העריכה יהיה ניתן לשמור את הטקסט והשמירה תשאר גם אם נרפרש את הדף! אם נרצה, נוכל לעשות clear ואז הדף יתרפרש ולשינויים שלנו לא יהיו זכר.

Its my paragraph and I will rewrite it if I want to, rewrite it if I want to.

You would rewrite too if it happened to you


איך זה נעשה? בקלות! ראשית יצרתי אלמנט ונתתי לו תכונת contenteditable שמאפשרת לנו לערוך אותו בקלות. שנית, יצרתי שני כפתורים. זה ששומר, פשוט יוצר localStorage ומעביר אליו את ה-innerHTML של האלמנט שלי. השני, זה שמבטל את השינויים, פשוט מנקה את ה-localStorage ומרפרש את הדף. ולבסוף הוספתי אירוע שב-window.onload הוא בודק אם יש לי localStorage ואם כן, הוא טוען מתוכו את מה שיש בו ויורה אותו ל-innerHTML של האלמנט שלי. הכל נראה כך:


<div id="main" contenteditable="true">
<p>Its my paragraph and I will rewrite it if I want to, rewrite it if I want to.</p>
<p>You would rewrite too if it happened to you</p>
</div>
<p>
    <input type="button" id="clear" value="Clear changes" />
    <input type="button" id="save" value="Save changes" />
</p>
<script type='text/javascript'>
/* IE addEventListener */
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();
var editable = document.getElementById('main');
addEvent(document.getElementById('save'), 'click', function () {
   localStorage.setItem('contenteditable', editable.innerHTML);
});
addEvent(document.getElementById('clear'), 'click', function () {
  localStorage.clear();
  window.location = window.location; // refresh
});
if (localStorage.getItem('contenteditable')) {
  editable.innerHTML = localStorage.getItem('contenteditable');
}
</script>

שימו לב שהשתמשתי ב-addEventListener על מנת להוסיף את האירועים ב-JavaScript. קל, מהיר ופשוט – לא?

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»HTML5 – תגית וידאו שעובדת בכל הדפדפנים
»שילוב תרגום בתגית וידאו ב-HTML5
HTML 5

תגובה אחת

  1. שניאור הגב אפריל 30, 2019 בשעה 1:46 pm

    אשמח לעזרה קטנה בנושא LOCALSTORAGE

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד