تایپ فارسی در صفحات وب سازگار با تمامی مرورگرهای متداول
مقدمه:
برای تایپ فارسی در صفحات وب سه راه متداول وجود دارد. اولین روش نصب کردن صفحه کلید فارسی در سیستم کاربر است که همیشه امکان آن وجود ندارد. روش دیگر استفاده از صفحه کلیدهای مجازی (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_.zip | 1.42 کیلو بایت |
| jkblayout.zip | 1.9 کیلو بایت |
| kblayout.zip | 2.06 کیلو بایت |
| نسخه سفارشی شده (تغییر زبان پیشفرض به فارسی و تغییر ترکیب تعویض زبان به Ctrl+Shift) | 2.17 کیلو بایت |
نظرات
امکان درج متن فارسی در div های editable
سلام. بابت این برنامه خیلی ممنون .
من سعی کردم تو دایوهای قابل تغییر (که تو پلاگین های جی کوئری پیداش کردم و قابلیت تایپ در دایو رو میده) این اسکریپتو فعال کنم . ولی نشد. ممکنه راهنمایی کنید که اصلا امکان پذیر هست یا نه؟
سپاس
فیلتر کردن اعداد
واقعاً دستتون درد نکنه ، من چند روز در به در این کد بودم ، فقط می خوام با استفاده از این کد اعداد را فیلتر کنم یعنی کاربر فقط بتونه حرف تایپ کنه کد دیگه که اضافه می کنم با این کد conflict داره مثلاً : http://www.itgroup.com.ph/alphanumeric/
خواستم این کد رو به کد شما اضافه کنم :
if ((key >= 0x06f0 && key <= 0x06f9) || (key >= 0x0030 && key <= 0x0039))
{return false;
e.returnValue = false;
اما کار نمی کنه میشه راهنمایی کنید
ممنون
تغییر زبان با Alt+Shift نه با ctrl+Shift
با عرض سلام و تشکر از شما دوست گرامی...
خیلی کار ما را راه انداختید (: واقعا ممنون. فقط یک مساله است و آن اینکه همه عادت دارند با Alt+Shift زبان را عوض می کنند و اینکه اینجا با Ctrl+Shift تغییر زیان صورت می گیرد خیلی رایج نیست در توضیحات بالاتر دیدم که نوشته یودید به خاطر اینکه کار browser دچار اختلال نشود با Alt+Shift تغغیر زبان را انجام نداده اید ولی به نظرم چون همه به این صورت عادت دارند اگر به این شکل (یعنی ALt+Shift) باشد بهتر است.رفتم کد جاوااسکریپت را دستکاری کنم که با Alt+Shift زبا ن تغییر کند ولی درست کار نمی کند. ممکن است لطف بفرمائید آن را چطور اصلاح کنم که این مشکل پیش نیاید؟
ممنون از توجه و راهنمائی شما
جستجو در ComboBox های فارسی
با سلام و عرض تشکر
می خواستم به عنوان پیشنهاد خدمتتون عرض کنم که اگر امکان تایپ و جستجو فارسی در ComboBox ها را هم به این Script اضافه کنید کاربرد آنرا دو چندان خواهید کرد و این قابلیت در اکثر برنامه های تحت وب کاربرد خواهد داشت.
باتشکر
علیرضا
مشکل با ارقام فارسی
با سلام و عرض تشکر
من از یک گرید ویو برای حذف و اضافه و ویرایش اطلاعاتم استفاده میکنم. چند تا ستون دارم که حاوی مقادیر عددی هستند.
در ابتدا lang اون ستون ها رو هم فارسی داده بودم ولی وقتی میخواستم اونها رو تبدیل به عدد کنم خطا میداد که نمیتونه تبدیل کنه.
من هم اومدم و زبان اون ستون ها رو به انگلیسی تغییر دادم. ولی در این حالت مشکل داره. یعنی وقتی زبان سیستم روی فارسی هست ارقامی که با کلیدهای بالای صفحه وارد میشن رو فارسی میزنه و ارقامی رو که با کلیدهای قسمت نام لاک زده میشه رو انگلیسی.
لطفا من رو راهنمایی کنید.
مشکل با ارقام فارسی
سلام،
این اسکریپت اعداد رو هم به طور پیشفرض فارسی میکنه برای همین شما در تبدیل اعداد مشکل داشتین.
میتونید قبل از تبدیل رشته به عدد، اعداد فارسی اون رو اول به انگلیسی تبدیل کنید تا مشکلتون حل بشه. کد اعداد انگلیسی 0x30, 0x31, ..., 0x39 هستند (به ترتیب از 0 تا 9) و اعداد فارسی 0x06f0, 0x06f1, ..., 0x06f9 که باید قبل از تبدیل این اعداد فارسی رو با معادل انگلیسیشون جایگزین کنید. البته بد نیست که اعداد عربی رو هم برای اطمینان بیشتر جایگزین کنید. کد اونها 0x0660, 0x0661, ..., 0x0669 هستند.
تبدیل کاراکترهای اعداد فارسی به انگلیسی
با سلام
میشه بیشتر توضیح بدین.
نمیدونم چه جوری باید تک تک کاراکترها رو فارسی کرد؟ مطمنا منظورتون با کد نویسی سمت سرور نیست. حتما این کار رو با کدهای جاوااسکریپت انجام میدین.
لطفا من رو راهنمایی کنید
تبدیل کاراکترهای اعداد فارسی به انگلیسی
سلام،
اتفاقا منظورم سمت سرور بود. مثلا با #C یه چیزی مثل این میشه:
public static string ConvertPersianNumbers(string s) { return s.Replace((char)0x06f0, (char)0x30) .Replace((char)0x06f1, (char)0x31) .Replace((char)0x06f2, (char)0x32) .Replace((char)0x06f3, (char)0x33) .Replace((char)0x06f4, (char)0x34) .Replace((char)0x06f5, (char)0x35) .Replace((char)0x06f6, (char)0x36) .Replace((char)0x06f7, (char)0x37) .Replace((char)0x06f8, (char)0x38) .Replace((char)0x06f9, (char)0x39) .Replace((char)0x0660, (char)0x30) .Replace((char)0x0661, (char)0x31) .Replace((char)0x0662, (char)0x32) .Replace((char)0x0663, (char)0x33) .Replace((char)0x0664, (char)0x34) .Replace((char)0x0665, (char)0x35) .Replace((char)0x0666, (char)0x36) .Replace((char)0x0667, (char)0x37) .Replace((char)0x0668, (char)0x38) .Replace((char)0x0669, (char)0x39); }تشکر
پس از جستجوی بسیار، سایت شما رو پیدا کردم.
واقعا ممنون از زحمتی که کشیدین. میتونم بگم هیچ جا تو نت همچین چیزی رو پیدا نکردم.
سپاسگذار و احترام فراوان.
نمایش فارسی اعداد
با سلام و تشکر فراوان از آقای هاشمینژاد عزیز
خواستم از شما این سوال را بپرسم که آیا راهی هست که بتوان همه اعداد درون صفحه را بصورت فارسی نمایش دهیم ؟
مانند اعداد درون pager در GridView و غیره
نمایش فارسی اعداد
سلام و ممنون از نظرتون،
برای این کار، بهترین و بی دردسر ترین کاری که به نظرم میرسه استفاده از یک فونت که اعداد رو به صورت فارسی نمایش بده هست. البته میتونید واقعا اعداد رو فارسی کنید ولی به نظر من ارزش وقتی که روش باید بذارین رو نداره.
با تشکر از تلاش های شما؛ بد
با تشکر از تلاش های شما؛ بد نیست نگاهی هم به اسکریپت فارسی تایپ بیندازید. متاسفانه مشغله زیاد فرصت بهبود این اسکریپت یا بازنویسی براساس فریم ورک های مرسوم را به من نداده است اما هنوز هم اسکریپت کارایی است به نظر خودم!
http://ashoob.net/farsitype/
پیشنهاد
سلام بابت این Library واقعا ممنونم، خیلی کار من رو راه انداخته.
فقط دو تا پیش نهاد داشتم:
یک اینکه : من نتونستم پیدا کنم که برای تایپ ویرگول از چه کرکتری باید استفاده کنم!!! (Shift+T) هم کار نکرد ازگر بتونید ویرگول رو هم اضافه کنید عالیه.
دو اینکه : چرا برای تایپ "پ" باید کلید "M" رو فشار داد؟ چرا "پ" رو روی کلید های "\" یا "÷"(کنار یک 1) قرار ندادید.
امیدوارم موفق باشید
مکان کلیدها
سلام، ممنون از نظرتون
1: ویرگول رو با استفاده از Shift + 7 میتونید تایپ کنید.
2: نه موقعیت "پ" و نه هیچ کارکتر دیگه ای رو من انتخاب نکردم. همونطور که گفتم این صفحه کلید طبق صفحه کلید استاندارد فارسی (ISIRI 9147) چیده شده. البته اگر خواستید به صوت غیر استاندارد کار کنید (مثل صفحه کلید پیش فرض ویندوز) میتونید خودتون موقعیت کلیدها را عوض کنید.
ضمنا تصویر صفحه کلید استاندارد رو تصحیح کردم و میتونید از اون استفاده کنید.
با تشکر
تغییر مجوز
ممنون چیز خیلی بدر بخوریه. اما اگه لطف کنید اسکریپت رو LGPL کنید که دیگه خیال همه رو راحت کردید D:
مجوز
ممنون از نظرتون.
در مورد مجوز که الان امکان استفاده در برنامه های تجاری رو داره. تعصبی روی مجوز ندارم ولی فعلا دلیل خاصی به فکرم نمیرسه که بخوام عوضش کنم. اگر دلیل خاصی داره که فکر میکنید LGPL بهتره، بگین. حتما روش فکر میکنم و نظرم رو میگم.
دلیل خاصی که نیست ولی چون
دلیل خاصی که نیست ولی چون عادت کردیم در مورد کتابخونه ها یا تکه کدها همش از LGPL و BSD استفاده کنیم برای همین با این دو تا و قوانینش بیشتر آشنا هستیم وخیالمون راحت تره. زیاد با CPL آشنا نیستم در همین حد میدونم که دستمون بازه اگه بخوایم خیلی از کارا رو باهاش بکنیم ولی کار از محکم کاری عیب نمیکنه. بعدشم نیست چون کدها کار یه ایرانی مثل شماست, آدم دوست داره احترام بذاره و درست ازش استفاده کنه وگرنه عذاب وجدان میگیره d:
توضیح درباره CPL
حق با شماست. این مجوز به اندازه LGPL شناخته شده نیست. خیلی وقته که قصد دارم یه توضیح درباره اینکه این مجوز چی هست بنویسم. دیگه اینقدر قول دادم به زودی درباره فلان موضوع مطلب مینویسم که خجالت میکشم بگم! ولی میگم: به زودی یک توضیح درباره این مجوز مینویسم.
فقط فعلا اینو به طور خلاصه داشته باشین:
شما میتونین از این کدها در برنامه هاتون آزادانه استفاده کنید (حتی برنامه های تجاری) با این شرط که پیغام کپی رایت رو حذف نکنین.
فرق اصلی این مجوز هم با LGPL اینه که در این مجوز اگر شما تغییراتی در کدها دادین یا مثلا باگی رفع کردین یا کدها رو توسعه دادین، باید حتما تغییرات خودتون روی کد رو به صورت عمومی منتشر کنید.
تايپ فارسي با چيدمان حروف انگليسي
نظرتون در مورد اين ابزارfingil express چيه؟ اينجا نوشته كه لازم نيست جاي حروف فارسي رو ياد بگيريم
http://ce.sharif.edu/~seddigh/fingil.html
fingil
این برنامه رو تا حالا ندیده بودم ولی کلا هدف از این برنامه کاملا متفاوت با چیزیه که اینجا ارایه شده.
در اسکریپتی که من نوشتم، هدف تایپ فارسی با استفاده از صفحه کلید استاندارد فارسی بدون نیاز به نصب صفحه کلید فارسی در سیستم عامل بوده.
در برنامه fingil، هدف تایپ فارسی بدون استفاده از صفحه کلید استاندارد فارسی هست که در اون نیاز به نصب صفحه کلید فارسی در سیستم عامل هست!
در کل ایده جالبی هست ولی کاربردش کاملا فرق داره. البته اینکه برای تایپ بعضی از حروف (مثل ص، ض، ط، ظ، ش، چ) باید موقعیتشون رو حفظ کرد، باعث شده که اون ایده اولیه (عدم نیاز به یادگرفتن صفحه کلید جدید) عملا کامل پیاده نشده باشه.
به هر حال، باز هم از ایده برنامه خوشم اومد. ممنون که این برنامه رو معرفی کردین.
اضافه کردن زبان انگلیسی به لیست زبانها
با سپاس فراوان بخاطر فراهم کردن و ارائه توضیحات کافی در ارتباط با این کتابخانه.
نکته یک : گذاشتن کامنت در وبلاگ شما اصلا واضح نیست و پساز کلی تلاش موفق به گذاتن نظر شدم ( حتی قبلا هم چند بار می خواست در مور نوشتههای شما نظر بدهم که کلا منصرف شدم ( واقعا خودم هم از انکه امروز لینک نظردهی را پیدا کردم عجب کردم ) لطفا فکری به حال این قسمت بکنید.
نکته دو : من می خواهم زبان انگلیسی را همبه این لیست اضافه کنم اما واقعا سر در نیاوردم ( در صورت امکان یک کتابخانه هم که دارای هر دو زبان فارسی و انگلیسی هس فراهم کنید و یا دقیق تر توضیح بدهید که رای اضاف کردن چه کاری باید انجام داد و خطی را که فرمودید کجا باید اضافه کرد
نکته سه : اگر بخواهیم بطور پیش فرض همه فیلدها با زبان فارسی باشد و بعد کاربر با ctrl+shift ( چپ یا راست ) زبان را به انگلیسی عوض کند چه کاری باید انجام بدهیم.
با سپاس از مطلب مفیدتان ( ناصر حاجلو- http://hajloo.wordpress.com )
نسخه سفارشی
طبق قولی که داده بودم، یک نسخه طبق درخواست شما اضافه کردم.
قدردانی بخاطر افزودن نسخه سفارشی
از اینکه لطف کردید و نسخه سفارشی رو برای من گذاشتید واقعا از شما ممنونم.
اما از آنجا که امرزو شرکت نیستم و نمی تونم این اسکریپت رو ازمایش کنم می خواستم بپرسم که
ایا تنها با اضافه کردن این اسکریپت به صفحه کاربر نهایی همه فیلدها را بصورت پیش فرض با زبان فارسی تکمیل خواهد کرد و درصورت نیاز با فشردن کلیدهای ctrl+shift می تواند از حروف انگلیسی استفاده نماید ؟
با سپاس فراوان از وقتی که برای تهیه این اسکریپتها گذاشتید.
پاینده - آزاد و سربلند باشید - قربان شما ناصر حاجلو http://hajloo.wordpress.com
شیوه کار
بله؛ نیاز به کار خاصی دیگری در صفحه نیست.
زبان جدید
اول اینکه ممنون از لطفتون. من هم مطالب وبلاگ شما رو گهگاهی میخونم و استفاده میکنم و برای همین هم جا داره یک بار دیگه تشکر کنم.
در مورد نکات:
نکته یک: قبلا اشتباها تو چندین پست کامنت غیر فعال شده بود و. احتمالا اینکه ندیده بودین به خاطر همین بوده ولی کلا تصمیم دارم که سیستم سایت رو عوض کنم ولی وقت نمیکنم.
نکته دو: اگر فقط زبان انگلیسی رو لازم داشته باشین که کار خاصی نمیخواد بکنین. چون به طور پیشفرض زبان دوم انگلیسی هست (همون default) ولی کلا برای اضافه کردن زبان جدید، اگر سورسی که دادم رو نگاه کنید، قسمتی که زبان فارسی رو اضافه کردم مشخصه (پایین صفحه و بعد از کامنتها) و از روی اون راحت میشه این کار رو کرد. باز هم اگر فکر میکنید من منظورتون رو متوجه نشدم، بیشتر توضیح بدین لطفا.
نکته سه: اگر منظورتون اینه که بدون اینکه lang رو مقدار بدین، پیشفرض فارسی باشن، باید یک نگاهی به کد بندازم. این مورد رو تا فردا بهتون خبر میدم.
تشكر
مهدي عزيز واقعاً ممنونم دستمريزاد --- فرهاد