וובמאסטר - תיכנות ובניית אתרים

שינוי כיוון של TEXTAREA והוספת תגי קוד

rmarko/‏ 14 ספטמבר, 2002
F+
F-

שינוי הכיוון

לפעמים אנו רוצים לשנות את כיוון הכתיבה ב-TEXTAREA ע"י לחיצה על קישור, כפתור וכו':






לצורך זה נבנה פונקציה המקבלת את את ה-TEXTAREA, ומשנה את הכוון ע"י הצבת הערך המתאים במאפיים dir שלה.
שני הערכים האפשריים הם:
  • ltr - שמאל לימין (Left to Right)
  • rtl - ימין לשמאל (Right to Left)

אנו יכולים בנות תנאי כזה:

1
2
3
4
5  

if(area.dir=="rtl")
    area.dir="ltr"
else
    area.dir="rtl"


אך אפשר גם לקצר אותו בהרבה ע"י שימוש בטרינרי אופרטור:

1
2
3
4
5  

function changeDir(area)
{
    area.dir=(area.dir=="rtl"?"ltr":"rtl")
}


מה שהתנאי אומר:
תציב בתוך המאפיין dir
ואז אנו בודקים את הכיוון הנוכחי, אם הוא rtl, מה שיוצב במאפיין יהיה הערך ltr (אחרי סימן השאלה), אם לא, יוצב הערך ltr (אחרי הנקודותיים).

הקריאה לפונקציה

1
2  

<input type="button" value="שנה כיוון" name="cdir" onClick="changeDir(this.form.tarea)">


תגי הוספת קוד

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


[תחילת קוד]     [סיום קוד]


נבנה שתי פונקציות שייקראו ע"י לחיצה על הקישורים המתאימים:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19  

function beginCode(area)
{
    with (area)
    {
        focus();
        value += "|הקוד|\r\n";
        area.dir="ltr"
    }
}
function endCode(area)
{
    with (area)
    {
        focus();
        value += "|סקוד|\r\n";
        area.dir="rtl"
    }
}


with מציין כי כל הקוד בבלוק הבא, יתייחס לאובייקט המסויים הזה. באותה מידה יכולנו לכתוב:

1
2
3
4  

area.focus();
area.value += "|סקוד|\r\n";
area.area.dir="rtl"


והקריאה לפונקציות:

1
2
3
4
5  


<span onclick="beginCode(document.frm.tarea);" style="cursor: pointer;">[<u>תחילת קוד</u>]</span>
    &nbsp; &nbsp;
<span onclick="endCode(document.frm.tarea);" style="cursor: pointer;">[<u>סיום קוד</u>]</span>


בהצלחה!
תגיות: HTML‏  /  JS‏  /  textarea‏  /  direction‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות