منتخب بازارچه

راهنمای ساده برای تایپ فارسی در فرمها

ehsan

Administrator
از اونجایی که تاحالا خیلی ها در مورد نحوه فارسی کردن فرم ها و امکان تایپ فارسی بدون فارسی نویس در input و textarea ها پرسیدن و راهنمای ساده و مفیدی در این زمینه من پیدا نکردم خواستم خودم اینو بنویسم.
قبلا یه راهنما برای فارسی کردن فرمهای comment نوشته بودم که متاسفانه چند تا هارد رو جابجا کردم و پیدا نکردم.

به هر حال این راهنما به درد افرادی میخوره که بخوان توی یه فروم تایپ فارسی بدون نیاز به فارسی نویس ویندوز داشته باشن. یعنی با این روش اگه یکی توی اونور دنیا با یه ویندوز چینی(!) بخواد توی این فرم فارسی تایپ کنه نیاز به نصب چیزی نداشته باشه.
این راهنما برای افرادی نوشته شده که در حد ابتدایی با کدهای html و نحوه کار با اونها آشنایی دارن و نیاز به اطلاعات تخصصی جاوا نداره. از طرفی اگر احساس میکنید این راهنما خیلی سخت و نا مفهوم است بهتره از خیر فارسی کردن فرم بگذرین! :D

هر فرم با <form> شروع میشه و با یه <form/> تموم میشه. معمولا به صورت زیر:
کد:
 <form method="post" action="something" name="formname">
داخل هر فرم یه سری المان وجود داره که برای ورود اطلاعات استفاده میشه. از جمله اونها که قابلیت تایپ هم داره input و textarea است و معمولا به صورتهای زیر:
کد:
<input type="text" name="inputname" />
<textarea name="text" rows="10" cols="70">something</textarea>
خب این یه آشنایی کلی.

در مرحله اول باید یه فایل جاوا اسکریپت که محتوی کاراکترهای فارسی است رو توی header صفحه load کنید. اسکریپتهای مختلفی شاید واسه این کار وجود داشته باشه ولی من تا بحال از این فایل که ادیتش هم آسونه استفاده میکردم. (farsix.js)
به صورت زیر که بین <header> و <header/> باید استفاده بشه:

کد:
<script type="text/javascript" src="http://www.domain.com/farsix.js"></script>
در مرحله دوم باید بریم سراغ فرم. توی هر کدوم از input و textarea ها که نیاز به فارسی نویسی دارید باید از کد زیر استفاده کنید:
کد:
 onkeypress="return convert(name,event)" dir="rtl"
که مثلا به صورت زیر خواهند شد:
کد:
<input type="text" name="inputname" onkeypress="return convert(name,event)" dir="rtl" />
<textarea name="text" rows="10" cols="70" onkeypress="return convert(name,event)" dir="rtl">something</textarea>
در مرحله سوم میریم سراغ نحوه ساخت یه دکمه برای تغییر زبان:
تا اینجای کار چیزی رو لازم نبود تغییر بدین و همش copy/paste بود. ولی از این به بعد باید به اسمها دقت کنید.
اینکه این دکمه رو کجا استفاده کنید دیگه به خودتون مربوطه. میتونه کنار input باشه... بالاش باشه یا هرجا ولی خب ترجیحا داخل فرم باشه.
این یه نمونه دکمه است:
کد:
<input type="button" onclick="change([color=red]fieldname[/color])" value=" تغيير زبان " />
باید دقت کنید که fieldname اسم اون فیلدی میشه که قراره با زدن این دکمه زبانش عوض بشه. که میتونه input باشه یا textarea فرقی نداره. به جای اون کلمه تغییر زبان هم هرچی بخواین میتونین استفاده کنید.

مرحله آخر هم که اختیاری است، نحوه ساخت دکمه های برای تغییر جهت textarea می باشد!
شما میتونید با استفاده از این دکمه ها جهت فرم رو عوض کنید. نکات مرحله قبل رو در مورد این مرحله باید رعایت کنید. به صورت زیر:
کد:
<input type="button" onclick="Right(this.form.[color=red]fieldname[/color])" value=" <-- " /> 
<input type="button" onclick="Left(this.form.[color=red]fieldname[/color])" value=" --> " />
به جای اون --> یا <-- هم میتونید از هر عنوان یا علامت دیگه ای استفاده کنید. همچنین لازمه که fieldname رو درست انتخاب کنید. این نام textarea خواهد بود که این دکمه ها بر روی اون اعمال میشن.

این نکته هم برای افراد علاقمند و خوش ذوق اضافه کنم که همین کار رو میتونید روی یه عکس انجام بدین. مثلا یه icon واسه تغییر زبان بسازید و onclick رو روش اضافه کنید مثل حالت input

امیدوارم مفید بوده باشه. سوالاتتون رو همین زیر بپرسید.
 

Jassmin

کاربر تازه وارد
دستت درد نكنه احسان جان

اميدوار بدرد اونايي كه زود زود ميكنن بخوره :lol: :lol: :lol:
 

mohsenmx

Registered User
به نقل از Ali_ix :
دست شما درد نکنه !
ولی حیف که با فایرفاکس کار نمیکنه !
یعنی در واقع فقط با IE کار میکنه ! :(
چه جورى ميشه يه کارى کرد که با فايرفوکس هم کار کنه ؟
 

Ali_ix

Registered User
مشکل اصلی از اون جاوا اسکریپت مربوط به کلیدهای فارسی هست !
یک آدم فداکار که جاوا بلده باید بشینه اون اسکریپت رو درست کنه یا از اول طوری بنویسه که با مرورگرهای دیگه مشکلی نداشته باشه و در واقع بر اساس استانداردهای وب کار بکنه ! :eek:
حالا این فداکار کیه ؟! پیدا کنید پرتقال فروش را ! :D
 

kami

مدیر بازنشسته
به نقل از Ali_ix :
مشکل اصلی از اون جاوا اسکریپت مربوط به کلیدهای فارسی هست !
یک آدم فداکار که جاوا بلده باید بشینه اون اسکریپت رو درست کنه یا از اول طوری بنویسه که با مرورگرهای دیگه مشکلی نداشته باشه و در واقع بر اساس استانداردهای وب کار بکنه ! :eek:
حالا این فداکار کیه ؟! پیدا کنید پرتقال فروش را ! :D
اگه بشه چي ميشه. :rolleyes:
 

ehsan

Administrator
فایرفاکس کلا با جاوا خیلی سخت کنار میاد. اگه کسی حل کنه که عالی میشه. :)
 

daftarekhaterat

Registered User
به نقل از ehsan :
فایرفاکس کلا با جاوا خیلی سخت کنار میاد. اگه کسی حل کنه که عالی میشه. :)
بعد ميگن اشكال از طراحان وب و طراحي صفحات فارسيه!
آخر يكي هم پيدا شد يه ايراد از اين مرورگر پرفيس و افاده گرفت. :happy:
 

cybamin

Registered User
به نقل از daftarekhaterat :
بعد ميگن اشكال از طراحان وب و طراحي صفحات فارسيه!
آخر يكي هم پيدا شد يه ايراد از اين مرورگر پرفيس و افاده گرفت. :happy:
خب مشكل اينه كه وقتي يه عده طرفدار يه برنامه اي ميشن فقط محاسن اونو در نظر دارن و اگه از برنامه مورد علاقشون ايراد بگيري ،حالتو ميگيرن! :blink:
 

Ali_ix

Registered User
به نقل از amin-asemi :
خب مشكل اينه كه وقتي يه عده طرفدار يه برنامه اي ميشن فقط محاسن اونو در نظر دارن و اگه از برنامه مورد علاقشون ايراد بگيري ،حالتو ميگيرن! :blink:
رویه بچه مردم عیب نذارید ! :blink:

فایرفاکس کلا متدش اینه که راحت از کنار ایرادات و اشکالات طراحی و برنامه نویسی نمیگزره !
و چون که IE اصلا تو مرامش نیست که این ایرادهارو تشخیص بده ما بد عادت شدیم و فکر میکنیم IE خوبه !
فایرفاکس با هیچ برنامه جاوای استانداردی مشکل نداره
تکبیر !:D
 

davidmors

مدیر بازنشسته
کاربر فعال
خب آدم بايد از كنار بعضي مسائل به سادگي بگذره ولي فاير فوكس لامصب ادم نيست كه :lol: :lol: :lol:
 

mazoolagh

Registered User
احسان خان - با اجازه كدي رو كه شما زحمت كشيده بودي و نوشته بودي يك تغييرات كوچيكي دادم.
همونطور كه ميدوني فقط در IE هست كه ميشه كد كليدي رو كه تابع onkeypress رو fire ميكنه عوض كرد و در بقيه مرورگرها (opera - netscape - firefox) اينكار نشدني هست. براي همين خاطر هست كه در كد شما خطي كه مقدار به e.which ميده عمل نميكنه و اگر شما در هر كدوم از اين 3 مرورگر javascript console رو باز كني حتما بايد روي اين خط پيغام خطا بده.
من netscape و firefox روي كامپيوترم ندارم ولي هر دو اينها مشابه هستند (gecko) ولي كد زير روي opera تست كردم. لطفا دوستان روي اين دو مرورگر تست كنن و نتيجه رو اينجا اعلام كنن تا اگر اشتباهي هست اصلاح كنم.
ضمنا بد نيست بدونيد كه عملكرد opera متفاوت هست يعني event.keyCode رو قبول ميكنه ولي نميذاره مقدار اون رو عوض كني. بهمين خاطر هست كه اين كد سه نوع مرورگر رو براساس مقدار userAgent شون تست ميكنه و نه قابليتهاي اونها.
البته يك مشكلي كه در اين كد هست اينه كه اگر كاربر با كليدهاي كرسر يا موس محل كرسر رو عوض كنه (در غير از IE) اطلاعات جديد نادرست وارد ميشه چون هميشه به آخر اضافه ميكنه و كاربر بايد با backspace از آخر تا محل مورد نظر حركت كنه تا نتيجه درست باشه ولي بهر حال در همه مرورگرها كار ميكنه! اگر كسي تونست اين مشكل رو برطرف كنه لطف كنه همينجا بذاره كه همه استفاده كنن.
ضمنا دقت كنيد كه نحوه تعريف و صدا زدن تابع onkeypress رو تغيير دادم .
نميخوام اينجا جنگ مرورگرها راه بندازم ولي ميخوام از موقعيت استفاده كنم و به دوستاني كه روي يك مرورگر خاص تعصب دارن پيشنهاد ميكنم كه اول همه موارد هر كدوم رو دقيق بررسي كنن و بعد با توجه به كاربردهاي خودشون انتخاب كنن و بقول معروف احساسي و بر اثر تبليغات يا جو عمل نكنن.

کد:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript">
//===================================================================
var k ;
var flag = true ;
var s = ' !"#$%،گ)(×+و-./0123456789:ك,=.؟@ِذ}ىُىلآ÷ـ،/’د×؛َءٍف‘{ًْإ~جژچ^_پشذزيثبلاهتنمئدخحضقسفعرصطغظ<|>ّ' ;
var b = navigator.userAgent.toLowerCase() ;
var msie = false ;
var gecko = false ;
var opera = false ;
if (b.indexOf('msie')>-1) msie = true ;
if (b.indexOf('gecko')>-1) gecko = true ;
if (b.indexOf('opera')>-1) opera = true ;
//===================================================================
function change(obj){
	flag = !flag ;
	obj.focus() ;
}
//===================================================================
function convert(fld,e) {
	if (flag) {
		
		if (msie) {
			k = event.keyCode ;
			if (k>31 && k<128) {
				h = s.charCodeAt(k-32) ;
				event.keyCode = h ;
				return true ;
			}
		}
		if (gecko) {
			k = e.which ;
			if (k>31 && k<128) {
				h =s.charCodeAt(k-32) ;
				fld.value  = fld.value + String.fromCharCode(h) ;
				return false ;
			}
			else {
				return true ;
			}
		}
		if (opera) {
			k = event.keyCode ;
			if (k>31 && k<128) {
				h =s.charCodeAt(k-32) ;
				fld.value  = fld.value + String.fromCharCode(h) ;
				return false ;
			}
			else {
				return true ;
			}
		}
	}
}
//===================================================================
function LangFar (myobj) {
	myobj.style.textAlign = "right" ;
	myobj.style.direction = "rtl" ;
	myobj.focus() ;
	lang = 1 ;
}
//===================================================================
function LangEng (myobj) {
	myobj.style.textAlign = "left" ;
	myobj.style.direction = "ltr" ;
	myobj.focus() ;
	lang = 0 ;
}
//===================================================================
</script>
<title></title>
</head>
<body>
<input  name="xx" onkeypress="return convert(this,event)" dir="rtl" type="text">
<textarea name="yy" rows="10" cols="70" onkeypress="return convert(this,event)" dir="rtl"></textarea>
</body>
</html>
 

mazoolagh

Registered User
امروز firefox و netscape 7.2 رو دانلود و نصب كردم. اين كد بدون اشكال كار ميكنه (بغير از هموني كه گفتم). خيالتون تخت باشه. اگر قاطي پاتي ميزنه احتمالا بخاطر اين هست كه مقدار s تو copy-paste تغيير كرده. از رو كد اصلي كه آقا احسان گذاشته اصلاحش كنين درست ميشه.
 

Ali_ix

Registered User
به نقل از mazoolagh :
امروز firefox و netscape 7.2 رو دانلود و نصب كردم. اين كد بدون اشكال كار ميكنه (بغير از هموني كه گفتم). خيالتون تخت باشه. اگر قاطي پاتي ميزنه احتمالا بخاطر اين هست كه مقدار s تو copy-paste تغيير كرده. از رو كد اصلي كه آقا احسان گذاشته اصلاحش كنين درست ميشه.
ایول ! :)
 
بالا