קורס Front-End Web Development שיעור מימוש פקד תיבת טקסט

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/lta
#2

לא הבנתי איך עובד הקטע של התגית - data-maxlength?

#3

לכל תגית HTML אפשר להוסיף מאפייני data. אלה מאפיינים שהשם שלהם מתחיל במילה data ואז מקף ואז איזשהו שם לבחירתך. אחרי זה מתוך JavaScript אפשר להסתכל על הערכים שכתובים שם באמצעות שדה dataset של האלמנט. הדבר נועד בדיוק כדי לתת לנו עוד מנגנון חיבור בין HTML ל JavaScript.

לדוגמא נניח שיש לנו ב HTML את הקוד הבא:

<button data-diff="2">0</button>

נוכל מתוך קוד ה JavaScript להסתכל על הערך של diff ולכתוב מספר חדש בגוף הכפתור המבוסס עליו. הקוד הבא מגדיל את המספר שכתוב על הכפתור בדיוק בערך שכתוב ב diff:

var btn = document.querySelector('button');
// the next line sets diff to Number(2) because data-diff attribute
// of the button has the value "2"
var diff = Number(btn.dataset.diff);
btn.addEventListener('click', function() {
    btn.textContent = Number(btn.textContent) + diff;
});
#4

הי,
בסוף הסרטון, בפונקציית הבנאי נרשמה השורה (שורה מס’ 12):

this.el.textarea.maxLength = this.maxLength

נאמר שכשמגיעים לגבול limit מקסימום הקלדה, אז נעצרים ולא ניתן להקליד יותר לתוך ה-div.
אשמח אם תסביר את התהליך שגורם לעצירת הכנסת תווים כשמגיעים לגבול המקסימום,
כלומר הסבר על לוגיקת המימוש בשורה זו.
תודה.

#5

כמו כן, שורה 2 ושורה 9 הן זהות, נרשמות פעמיים.
מדוע צריך?
להלן השורה הכפולה:

this.maxLength = maxLength;
#6

הי,

השורה הכפולה זה בטעות. אפשר למחוק את הפעם השניה שהיא מופיעה.

לגבי this.el.textarea.maxLength - לכל אלמנט מסוג textarea יש מאפיין maxLength שכבר קיים בדפדפן וגורם להגבלת אורך הטקסט שאפשר להכניס בתיבה. ב HTML כותבים את זה כך:

<textarea maxlength="50"></textarea>

והקוד שראית מעדכן את הערך הזה מתוך JavaScript