בולנט - דברים מיוחדים...

www.ASP.org.il

Israeli ASP Organization
ארגון ה-ASP הישראלי
מאמרים/דוגמאות קוד
קישורים
ספרות
חיפוש כללי:

חפש!
כלליHTMLASPASP.NETSQLמסדי נתוניםJavaScriptXML * XSLDHTML * CSSעיצוב וגרפיקהשרתיםComponentsפרסום ושיווקקידום אתריםקופירייטינגPHP
פרסומת
דף ראשי מדורים דרושים הרשמה למועדון אודותינו צור קשר
מיקום: מאמרים ודוגמאות קוד > JavaScript

הגבלת תווים ב-TextArea

הסבר

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

איך זה יראה?


Total Chars: 0

ואיך נראה הקוד?

<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>

הסבר על הקוד

כמו שבוודאי ראיתם, הקוד ממש פשוט ומובן אבל בכל זאת אנסה להסביר מה שאולי לא כל כך פשוט.

var maxChars = 30; זו הגדרת משתנה אשר יהיה מספר התווים המקסימלי אותו נאפשר לכתוב.
שימו לב לאופן הקריאה לפונקציה ובאילו מצבים.
אנו קוראים לה ב-onKeyPress (כאשר מקש נלחץ בתיבת הטקסט) וב-onPaste (בעת הדבקה), ואנו שולחים לפונקציה את this, אשר מייצג בעצם את האובייקט עצמו, ה-TextArea.
בפונקציה עצמה, אנו דבר ראשון מחשבים את מספר התווים הנוכחי ע"י הפקודה: curLength = objTextArea.value.length אחר כך אנו מבצעים את הבדיקה של מספר התווים הנוכחי מול המספר המקסימלי.
חשוב מאוד להבין שאורך התווים הנוכחי כולל את התו שכתבנו עכשיו או את המספר תווים שהדבקנו, אך הסיבה שהם לא מופיעים אם חרגנו ממספר התווים המקסימלי היא הערך שמחזירה הפונקציה.
במידה ויש חריגה, הורתי לפונקציה להחזיר false, מה שמורה לדפדן בעצם לא לבצע את הפונקציה, כאילו הדפדן פשוט מתעלם.
במידה ואין חריגה, הפונקציה תחזיר נעשה בדיקה נוספת.
במידה ומדובר בנסיון הדבקה, אנו נבדוק את אורך המחרוזת שמשתמש מנסה להדביק ורק במידה והאורך יכול להכנס ללא חריגה, נכניס אותו.
clipboardData.getData('Text') מחזיר לנו את המחרוזת השמורה ב-Clipboard, אותה מנסה המשתמש להדביק.

הפקודה

onKeyUp="totalChars.innerText=this.value.length" מורה לדפדן לכתוב ב-span את מספר התווים, לאחר שהקוד בדק אם להוסיף את מה שנכתב או לא.

זה בעצם הכל. שימושי, לא?
בכל מקום בו אתם משתמשים ב-TextArea אני ממליץ להשתמש בדוגמא זו, כי תמיד רצוי שתהיה הגבלה על מספר התווים.
לא חסרים גולשים שאוהבים לעשות "ניסויים" על הקוד שלכם ואני בטוח שאתם לא אוהבים אותם :)

בהצלחה



         

מחבר: אדם ליבסקירמת קושי: 1  ||  ציון: (5.5)כל הזכויות שמורות ל-IAO ©

© כל הזכויות שמורות ל-IAO
Lamparas y Mobiles  |   בולנט - Bolenat סטלן  |   מתכונים  |   הומו גאה  |   שמות  |   מיסטיקה וקבלה  |   Fisherman Pants סדרות טלויזיה טיסות זולות הודו נפאל תאילנד ביקורות משחקי מחשב Engineering Solutions עיצוב גרפי בפלאש לימוד צילומים תמונות ופיתוח קנוורט משאיות ישראל islands & beaches TV Series Guide חגי ישראל play online game clothes wear בניית אתר חנויות מחשבים ו-ציוד הקפי jewish holidays israeli games ישראל אופנה חולצות טישירט מעוצבות הריון לידה תינוק כוסיות ערומות קורס אימון אישי מידע על חברות רשתות ikesound car audio wholesale recetas comidas family and woman magic trip T Shirt mania Bolenat Searches Bolenat UK online video clips חיפושים מגזין מסטול ל-סטלן המצוי Hebrew learning online תכשיטים טבעות שרשראות קליפרים מצתים התפתחות הילד comparte light lamps תרופות / מחלות הדפסה על חולצות למכירה מוזיקה ישראלית תמונות סרטונים מצחיקים גידול צמחים פרחים ישראלים בעולם מתפנקים - ספא פינוק מושלם ייעוץ עסקים משפחתיים סרט קולנוע - קומדיה סאטירה כסף / שוק ההון לימוד שחיה בריכה מפסיקים לעשן סיגריות נשים אישה בחורה בחורות Bongs and Pipes Music Festivals Coca-Cola קססונית