הסבר
זוהי דוגמא לשכלול השימוש בתיבת TextArea המשמשת בדרך כלל לקטסט ארוך הכולל יותר משורה אחת.
הדוגמא הבא תשתמש בפונקציה אשר תאפשר הגבלה של מספר התווים אותם ניתן יהיה לכתוב ב-TextArea.
שימו לב שגם דאגתי לחסום את האפשרות הדבקה ללא בדיקה של אורך הטקסט, משום שזו דרך שבקלות ניתן "לעקוף" את אורך התווים המקסימלי.
איך זה יראה?
Total Chars: 0
ואיך נראה הקוד?
<![CDATA[
<SCRIPT LANGUAGE=javascript>
<!--
var maxChars = 30;
function checkArea(objTextArea,isPaste){
curLength = objTextArea.value.length
if (curLength < maxChars){
if (isPaste)
if (maxChars-curLength-clipboardData.getData('Text').length<0)
return false;
else
return true;
else
return true;
}
else
return false;
}
//-->
</SCRIPT>
<textArea onPaste="return checkArea(this)" onKeyPress="return checkArea(this)"
onKeyUp="totalChars.innerText=this.value.length" cols=50 rows=5>
</textArea>
<BR>
Total Chars: <span id=totalChars>0</span>
]]>
הסבר על הקוד
כמו שבוודאי ראיתם, הקוד ממש פשוט ומובן אבל בכל זאת אנסה להסביר מה שאולי לא כל כך פשוט.
<![CDATA[
var maxChars = 30;
]]>
זו הגדרת משתנה אשר יהיה מספר התווים המקסימלי אותו נאפשר לכתוב.
שימו לב לאופן הקריאה לפונקציה ובאילו מצבים.
אנו קוראים לה ב-onKeyPress (כאשר מקש נלחץ בתיבת הטקסט) וב-onPaste (בעת הדבקה), ואנו שולחים לפונקציה את this, אשר מייצג בעצם את האובייקט עצמו, ה-TextArea.
בפונקציה עצמה, אנו דבר ראשון מחשבים את מספר התווים הנוכחי ע"י הפקודה:
<![CDATA[
curLength = objTextArea.value.length
]]>
אחר כך אנו מבצעים את הבדיקה של מספר התווים הנוכחי מול המספר המקסימלי.
חשוב מאוד להבין שאורך התווים הנוכחי כולל את התו שכתבנו עכשיו או את המספר תווים שהדבקנו, אך הסיבה שהם לא מופיעים אם חרגנו ממספר התווים המקסימלי היא הערך שמחזירה הפונקציה.
במידה ויש חריגה, הורתי לפונקציה להחזיר false, מה שמורה לדפדן בעצם לא לבצע את הפונקציה, כאילו הדפדן פשוט מתעלם.
במידה ואין חריגה, הפונקציה תחזיר נעשה בדיקה נוספת.
במידה ומדובר בנסיון הדבקה, אנו נבדוק את אורך המחרוזת שמשתמש מנסה להדביק ורק במידה והאורך יכול להכנס ללא חריגה, נכניס אותו.
<![CDATA[
clipboardData.getData('Text')
]]>
מחזיר לנו את המחרוזת השמורה ב-Clipboard, אותה מנסה המשתמש להדביק.
הפקודה
<![CDATA[
onKeyUp="totalChars.innerText=this.value.length"
]]>
מורה לדפדן לכתוב ב-span את מספר התווים, לאחר שהקוד בדק אם להוסיף את מה שנכתב או לא.
זה בעצם הכל. שימושי, לא?
בכל מקום בו אתם משתמשים ב-TextArea אני ממליץ להשתמש בדוגמא זו, כי תמיד רצוי שתהיה הגבלה על מספר התווים.
לא חסרים גולשים שאוהבים לעשות "ניסויים" על הקוד שלכם ואני בטוח שאתם לא אוהבים אותם :)
בהצלחה
|
.png)
