تایپ فارسی در صفحات وب سازگار با تمامی مرورگرهای متداول

نوشته شده توسط محمد نمازی در ۱۳ تیر ۱۳۹۲

برای تایپ فارسی در صفحات وب سه راه متداول وجود دارد. اولین روش نصب کردن صفحه کلید فارسی در سیستم کاربر است که همیشه امکان آن وجود ندارد. روش دیگر استفاده از صفحه کلیدهای مجازی (On-Screen Keyboard) است که برای کاربران مبتدی (که مکان کلیدها را نمیشناسند) روش مناسبی است ولی برای کاربران متوسط و یا حرفه‌ای، روش وقت‌گیر و عذاب آوری است. در نهایت روش آخر استفاده از JavaScript برای تغییر صفحه کلید به فارسی است که به نظر من راحت‌ترین روش است و بحث من در اینجا محدود به این روش می‌شود.

اسکریپتهای مختلفی برای تایپ فارسی در صفحات وب وجود دارد. من هم تا کنون از این اسکریپت استفاده می‌کردم (با تشکر از تهیه کنندگان این اسکریپت). مشکلی که این اسکریپت و تمامی اسکریپتهای مشابهی که من دیده‌ام اینست که تنها در اینترنت اکسپلورر و فایرفاکس (و بعضا به طور ناقص در اپرا) کار می‌کنند، به طوری که من نتوانستم اسکریپتی که در تمامی مرورگرها بدون مشکل کار کند پیدا کنم. در نتیجه بعد از چند روز تلاش و امتحان کردن روشهای مختلف نهایتا به راه حلی رسیدم که در تمامی مرورگرهایی که من توانایی تست آنها را داشتم به خوبی کار می‌کند. در اینجا اسکریپت حاصل شده را ارایه داده‌ام.

سازگاری با مرورگرها:

من این اسکریپت را با مرورگرهای مختلفی از جمله IE6+، FF2+، Opera 9.63+، Chrome 1+، Safari 3.525، Netscape Navigator 9 تست کرده‌ام و مشکل خاصی مشاهده نکردم. متاسفانه امکان تست در مرورگرهای دیگر را در حال حاظر ندارم. لطفا در صورتی که می‌توانید این اسکریپت را با مرورگرهای دیگر نیز تست کنید و نتیجه را به من اطلاع دهید. همچنین در صورتی که باگی در اسکریپت مشاهده می‌کنید، لطفا گزارش دهید تا در اسرع وقت سعی در رفع آن نمایم.

روش استفاده:

سه نسخه از این اسکریپت در اینجا ارایه شده است. فایل jkblayout.js نسخه اصلی این اسکریپت است که برای افرادی که تمایل به دیدن شیوه کار اسکریپت و یا احیانا رفع باگهای احتمالی دارند، ارایه شده است. این فایل به صورت یک پلاگین برای jQuery 1.3 طراحی شده است. نسخه پیشنهادی من فایل jkblayout.min.js است که فایل فشرده شده از روی نسخه اصلی اسکریپت است. برای استفاده از آن باید ارجاع این فایل را (بعد از ارجاع خود jQuery) به صفحه اضافه کنید.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jkblayout.min.js"></script>

نسخه سوم این اسکریپت فایل kblayout.js است. این نسخه را برای شرایطی در نظر گرفته‌ام که به هر علت تمایل به استفاده از jQuery نداریم. در این نسخه کلیه وابستگی‌ها به jQuery را حذف کرده‌ام، بنابراین دیگر نیازی به وجود ارجاع به jQuery وجود ندارد.

<script type="text/javascript" src="kblayout.js"></script>

پس از اضافه کردن این اسکریپت به صفحه، برای فارسی کردن هر فیلد کافیست ویژگی lang را با مقدار fa به فیلد مورد نظر اضافه کنید.

<input lang='fa' type="text" />
<textarea lang='fa' cols='40' rows='6'></textarea>

در صورتی که بخواهید از این اسکریپت در صفحات ASP.NET استفاده کنید، می‌توانید این ویژگی را مستقیما به تگ TextBox اضافه کنید.

 <asp:TextBox runat=”server” ID=”TextBox1″ lang=”fa” />

<asp:TextBox runat="server" ID="TextBox1" lang="fa" />

در حالتی که نیاز باشد که از طریق Code-Behind این کار را انجام دهید، از طریق ویژگی Attributes این کار قابل انجام است.

TextBox1.Attributes["lang"] = "fa";

isiri9147

تایپ با استفاده از اسکریپت:

صفحه کلید استفاده شده در اینجا، صفحه کلید استاندارد فارسی (ISIRI 9147) است که البته برای اینکه اسکریپت با اعمال پیش‌فرض مرورگر تداخل ایجاد نکند، کلیدهای حالت استفاده از Alt پیاده سازی نشدند و تنها در حالت عادی و استفاده از Shift منطبق با این استاندارد است. ضمنا در این صفحه کلید امکان تایپ نیم‌فاصله با استفاده از Shift+Space نیز وجود دارد. برای تغییر زبان از ترکیب کلیدهای Ctrl+Space استفاده می‌شود و با چند بار فشار دادن این ترکیب، می‌توان بین زبان‌های مختلف موجود یکی را انتخاب کرد. موقعیت کلیدهای صفحه کلید را در تصویر مقابل می‌توانید مشاهده کنید. (ممکن است که استفاده از این تصویر کوچک شده از نظر حق کپی مجاز نباشد. اگر کسی اطلاع بیشتری در این مورد دارد، من را راهنمایی کند.)

مثال:

برای مشاهده طرز کار این اسکریپت، یک مثال در اینجا آورده ام. در این قسمت می‌توانید صفحه کلید فارسی را امتحان کنید. دقت کنید که در صورتی که در سیستم عامل شما صفحه کلید فارسی نیز نصب هست، از آن استفاده نکنید و هنگام تایپ در این فیلد صفحه کلید را در سیستم عامل خود به زبان انگلیسی برگردانید.
موقعیت کلیدها در دو حالت عادی و همراه با Shift (یا تبدیل) در تصویر موجود است. اگر موقعیت کلیدها در صفحه کلید شما متفاوت است، صفحه کلید شما استاندارد نیست. بهتر است سعی کنید تا به تایپ با این صفحه کلید عادت کنید.

تعریف صفحه کلیدهای جدید:

فرض کنید که می‌خواهید صفحه کلید جدیدی برای زبان xx به این اسکریپت اضافه کنید. برای این کار فایل جدیدی به نام kblayout.xx.js ایجاد کنید و در آن آرایه‌ای به این صورت قرار دهید:

keyboardLayout['xx'] = [
    ۰x0020, 0x0021, ..., 0x002f, 
    ۰x0030, 0x0031, ..., 0x003f, 
    ۰x0040, 0x0041, ..., 0x004f, 
    ۰x0050, 0x0051, ..., 0x005f, 
    ۰x0060, 0x0061, ..., 0x006f, 
    ۰x0070, 0x0071, ..., 0x007f
];

در این مثال به جای هر مقدار در این آرایه، معادل آن را در صفحه کلید جدید قرار دهید. تنها استثناء در اینجا خانه ۰x007f است که در آن معادل Shift+Space را قرار دهید. در صورتی که در صفحه کلید جدید این ترکیب معنای خاصی ندارد، می‌توانید این خانه از آرایه را مقدار ندهید. برای مشاهده یک نمونه می‌توانید به اسکریپت اصلی که در آن صفحه کلید فارسی تعریف شده است مراجعه کنید.
سپس برای اضافه کردن این زبان به چرخه زبانهای موجود در هنگام فشار دادن کلیدهای Ctrl+Space کد زیر را به انتهای این فایل اضافه کنید:

langCycle.push('xx');

در صورتی که بخواهید جهت نوشته‌ها را نیز در این زبان مشخص کنید (مثلا فرض کنید ltr) کد بالا را به صورت زیر بنویسید:

langCycle.push({lang: 'xx', direction: 'ltr'});

برای استفاده از این زبان جدید، کافیست از همان ویژگی lang، این بار با مقدار xx استفاده کنید:

<input lang='xx' type="text" />

در صورتی که بخواهید زبان تمام فیلدها (بدون نیاز به ویژگی lang) تغییر کند و از کلید Ctrl+Shift نیز برای تغییر صفحه کلید استفاده نشود، می‌توانید خط تغییر langCycle را به صورت زیر بنویسد:

langCycle=['xx'];

در نهایت ارجاع به فایل ایجاد شده (kblayout.xx.js) را بعد از ارجاع به اسکریپت kblayout‌ (هر حالتی که استفاده شده) اضافه کنید.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jkblayout.min.js"></script>
<script type="text/javascript" src="kblayout.xx.js"></script>

ضمیمه :

jkblayout.min_

jkblayout

kblayout

kblayout-c1

 به نقل از : مهدی هاشمی نژاد

دیدگاه‌تان را ارسال کنید ...