היפוך של אנגלית לעברית באמצעות AJAX

 

אתם בטוח מכירים את זה שאתם רוצים לכתוב טקסט בעברית ואז במקום "לא נראה לי" אתם מקבלים על המסך "kt brtv kh", אבל לא לפני שהחבר לידכם מספיק להוציא צעקת יאוש של "אווו אוו אוו, אתה כותב באנגלית". אם הזדהתם עם הראשון אז אתם בטוח מכירים את זה שיש שדות טקסט מסויימים שמוכנים לקבל רק עברית, אז עד שימציאו שדות יעודיים לשפה אחת (אולי HTML5?) אני מגיש לכם כאן פתרון פשוט למימוש, שיגרום להחלפה מידית של טקסט שמוזן באנגלית בשדה מסויים לעברית.

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

בואו נעבור כעת לקוד, אנחנו נתחיל עם ה-HTML:

1
2
3
4
5
6
7
8
9
10
11
<html>
...
<body>
   
    <form>
        <p><label for="textHeb">הכנס כאן את הטקסט (כדאי לנסות אנגלית): </label></p>
        <textarea type="text" name="textHeb" id="textHeb" onkeyup="ajaxFunction();"></textarea>
    </form>
    ....
</body>
</html>

כל מה שיצרנו זה טופס ובתוכו textarea עם ID ושם-"textHeb". בנוסף הוספנו לו קריאה לפונקציה ajaxFunction (שאותה ניצור בהמשך) כאשר לוחצים על תו – כלומר, כאשר מקלידים בתוך הטופס, לאחר כל הקלדה קוראים לפונ' ajaxFunction.

כעת נעבור לכתיבת קוד ה-AJAX. למי שלא יודע AJAX היא לא שפה, אלא למעשה טכניקה לשילוב של JS עם גישה לשרת (דרך פרוטוקול XMLHttpRequest). ישנם כמה דרכים למימוש הטכניקה הזו, אני בחרתי לדעתי בפשוטה מכולם והיא מימוש AJAX בשילוב עם ספריית ה-JS השימושית, jQuery.
היתרון הגלום בשילוב הזה הוא כמו בכל קוד jQuery, המימוש הרבה יותר פשוט וקצר. אז בואו נעיף מבט בקוד שמתווסף לנו בין תגיות ה-Head:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
<script type="text/javascript">
    function ajaxFunction(){
        $.ajax({
            url: 'heb.php?textHeb='+$("textarea[name=textHeb]").val(),
            type: 'GET',
            timeout: 1000,
            success: ...
        });
    }
</script>

אם זה נראה קצת מסובך אז עוד מעט הכל יראה מאוד פשוט. נתחיל, בשורה הראשונה אנחנו מוסיפים קישור לספריית ה-jQuery. עוד לא הסברתי את זה באף מאמר כאן אבל הסיבה שאני מקשר לספריה שנמצאת בגוגל ולא מקשר לספריה שנמצאת בשרת שלי היא מכיוון ו-jQuery היא ספרייה מאוד שימושית ויש הרבה מאוד סיכוי שהגולש שנכנס לאתר שלי כבר היה באתר אחר בו השתמשו ב-jQuery (דרך גוגל) והספרייה שמורה לו במטמון. כך אני יכול לחסוך את זמן הטעינה של הספרייה.
בשורה השלישית אנחנו יוצרים את הפונקציה ajaxFunction, הפונקציה שקוראים לה לאחר כל הקלדה בתיבת הטקסט שלנו.
כעת אנחנו פונים למימוש של ajax ב-jQuery (שורה 4). בפנייה לאג'קס נפתחים לפנינו הרבה אופציות. אני השתמשתי כאן בארבעה משתנים:

  • url
  • type
  • timeout
  • success

המשתנה הראשון מכיל את כתובת אליה וממנה האג'קס שולח ומקבל נתונים, אנחנו נחזור אליו. המשתנה השני קובע באיזה צורה אנחנו שולחים את הנתונים (get או post). המשתנה השלישי דיי מובן משמו, משך הזמן ל-timeout (במילי שניות, 1000 = שניה אחת). במשתנה הרביעי אנחנו כותבים את הפעולות שאנחנו רוצים לבצע ברגע שהפעולה בוצעה בהצלחה.

בואו נחזור שנייה לתאוריה, מה שאנחנו רוצים שיקרה הוא שכאשר משתמש כותב בתיבת הטקסט שלנו, הטקסט ישלח לאחר כל הקלדה של אות לקובץ חיצוני (במקרה שלנו heb.php). קובץ זה יעבור על הטקסט שנשלח אליו, ויחליף כל תו באנגלית לתו המקביל לו (במקלדת) בעברית, ולבסוף ידפיס את המחרוזת בעברית.

בואו נביט שוב במשתנה ה-url (שורה 5). אנחנו בעצם פונים לקובץ ה-PHP שלנו ומעבירים לו משתנה GET בשם, textHeb. המתשנה מכיל את הערך של תיבת הטקסט שלנו. אני לא אעבור איתכם על קובץ ה-PHP (אתם מוזמנים להוריד את הקובץ ולהביט בעצמכם דרך הכפתור "קוד" בתחילת המדריך), אבל אני אדגיש שתי שורות חשובות מתוך הקובץ.

1
2
header("Cache-Control: no-cache");
header('Content-Type: text/html; charset=utf-8');

השורה הראשונה בעצם אומרת לדפדפן לא לשמור את הדף במטמון (חשוב, על מנת שנוכל לקבל נתונים עדכניים כל הזמן). בשורה השנייה אנחנו קובעים את המסמך בקידוד utf-8 – הנקודה הזו מאוד קריטית אם אנחנו רוצים לראות עברית ולא רק קישקושים.

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

חזרנו לקוד ה-JS שלנו, כעת בואו נראה מה מופיע תחת המשתנה success:

1
2
3
4
5
6
7
8
9
10
11
12
success:
function(text){
    textLen = $("textarea[name=textHeb]").val().length;
    if(text.length == textLen)
    {
        $("textarea[name=textHeb]").val(text);
    }
    else if($("textarea[name=textHeb]").val().charAt(textLen-1) == ' ' && text.length+1 == textLen)
    {
        $("textarea[name=textHeb]").val(text+' ');
    }
}

בתוך המשתנה success יצרנו פונקציה עם משתנה text. המתשנה text הוא למעשה הערך שמוחזר (הודפס) בקובץ ה-PHP.
למעשה יכלנו לקצר את כל הקוד ולכתוב רק:

1
2
3
4
success:
function(text){
        $("textarea[name=textHeb]").val(text);
    }

הקוד הנ"ל למעשה מכניס את הערך המוחזר מקובץ ה-PHP לתוך תיבת הטקסט שלנו. הבעיה היא שאנחנו נתקלים בשני באגים. הבאג הראשון מופיע כאשר המשתמש מקליד טקסט והשרת מחזיר תגובה בזמן ההקלדה ומוחק לו את סוף המשפט שהוא כתב (פעולת המרת האנגלית בעברית לוקחת זמן ובנתיים המשתמש יכול להכניס עוד תווים). לשם כך העברתי את המחרוזת החוזרת בדיקה לראות אם אורך המחרוזת שווה לאורך תיבת הטקסט שלנו, ורק במקרה כזה יתבצע ההחלפה (שורה 4).
הבאג השני הוא שכאשר התו האחרון שנשלח המחרוזת הוא סימן רווח, התו יעלם מכיוון ולא ניתן לשלוח רווחים בוסף מחרוזות. במקרה כזה אני שוב מוודא שאורך תיבת הטקסט שווה לאורך המחרוזת שחזרה מהשרת (+1) ומעדכן את תיבת הטקסט במחרוזת המוחזרת + סימן רווח.

לסיום אני רק רוצה לציין שהמימוש כאן ב-AJAX הוא לא הכרחי ואפשר לעשות את הבדיקות וההחלפה ב-JS בלבד, הסיבה שהשתמשתי ב-AJAX היא על מנת להדגים את הטכנולוגיה ואת הפשטות של הפעלת AJAX באמצעות jQuery.
זה הכל, מקווה שהייתי ברור לכם, אשמח לשמוע מה אתם חושבים על הקוד וגם לענות על שאלות כאן למטה בתגובות.

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
רוניNo Gravatar 10 בנובמבר

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

[תגובה]

אורן רוט

צודק. הנ"ל היה ניסוי והסבר איך להשתמש בAJAX עם jQuery. בהחלט לא שיא היעילות.

[תגובה]

רוני

בתור שכזה, בהחלט עושה את העבודה.

[תגובה]

שמואלNo Gravatar 16 במרץ

תודה על הסקריפט הנהדר

[תגובה]

danNo Gravatar 31 במאי

היי באתר של אגד, במערכת חיפוש זמנים, יש שדות יעודיים לעברית בלבד..

[תגובה]

dan

אופס, לא שמתי לב שרשמת..

[תגובה]

גילNo Gravatar 5 במאי

סחתיין – רעיון יפה ושימושי מאוד במקרים מסויימים.
הערה קטנה – נראה לי שעדיף לקרוא לפונקציה באירוע onkeydown דווקא, כדי לכסות את המקרה שמישהו מקליד ובעוד המקש לחוץ (למשל כשרוצים לכתוב "חחחחחח" או משהו בסגנון) – מקיש עם העכבר במקום אחר על הדף ומוציא את הפקד מפוקוס(בטעות או במכוון).

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון