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

تصویر مهدی

مقدمه:

برای تایپ فارسی در صفحات وب سه راه متداول وجود دارد. اولین روش نصب کردن صفحه کلید فارسی در سیستم کاربر است که همیشه امکان آن وجود ندارد. روش دیگر استفاده از صفحه کلیدهای مجازی (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" />

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

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

صفحه کلید استاندارد

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

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

مثال:

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

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

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

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

در این مثال به جای هر مقدار در این آرایه، معادل آن را در صفحه کلید جدید قرار دهید. تنها استثناء در اینجا خانه 0x007f است که در آن معادل 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>

بروزرسانی:

نسخه سفارشی درخواست شده در این کامنت اضافه شد. فکر می‌کنم این نسخه برای آموزش شیوه سفارشی کردن این کتابخانه نیز مثال مناسبی باشد. در این نسخه ترکیب کلید تعویض زبان را به Ctrl+Shift تغییر داده‌ام و همچنین زبان پیشفرض را فارسی کرده‌ام. دقت کنید که تغییرات را بر روی نسخه بدون نیاز به jQuery انجام داده‌ام.

ضمیمهاندازه
jkblayout.min_.zip1.42 کیلو بایت
jkblayout.zip1.9 کیلو بایت
kblayout.zip2.06 کیلو بایت
نسخه سفارشی شده (تغییر زبان پیشفرض به فارسی و تغییر ترکیب تعویض زبان به Ctrl+Shift)2.17 کیلو بایت