စာဖတ်သူအနေနဲ့ Web Development ကိုစလေ့လာဆဲ ဒါမှမဟုတ် Web      Development နဲ့ အလုပ်လုပ်နေသူ တစ်ယောက်ဆိုရင်တော့ အခုပြောမယ့် အကြောင်းအရာ ကိုသိပြီးသားဖြစ်ချင်ဖြစ်ပါလိမ့်မယ်။ HTML ရဲ့ input element တစ်ခုကို User က Edit လုပ်ခွင့်မပေးဖို့ (ဥပမာအားဖြင့် Textbox ကို User ကစာရိုက်ထည့်လို့မရအောင်ပေါ့) အသုံးပြုတဲ့ Element နှစ်ခုရှိပါတယ်။ readonly နဲ့disabled ဆိုပြီး နှစ်ခုရှိပါတယ်။ ဒီမှာ မေးစရာရှိတာက readonly နဲ့ disabled ကတူလား။ ဘာတွေကွဲပြားလဲ။ ဘယ်နေရာမှာ ဘာကိုသုံးတာလဲ။ ဒီမေးခွန်းတွေ ဖြေဖို့ မသေချာသေးဘူးဆိုရင်တော့ ဒီ article ကိုဆက်လေ့လာကြည့်လိုက်ပါ။

ဥပမာအနေနဲ့ Textbox Input Element နဲ့လေ့လာကြည့်မယ်။

<input type=”text” name=”txtname” value=”mmtut” disabled/>

<input type=”text” name=”txtname” value=”mmtut”  readonly/>

ဒီလိုရေးမယ်ဆိုရင် disabled နဲ့ရေးထားတဲ့ textbox မှာစာသားတွေက မှိန်နေပြီး readonly နဲ့ရေးထားတဲ့ textbox မှာစာသားတွေက ပုံမှန်အတိုင်းပေါ်တဲ့အပြင် cursor ပါချနိုင်ပြီး focus လုပ်လို့ရပါတယ်။ ဒါပေမယ့် နှစ်ခုစလုံး User ကပြင်ရေးလို့မရပါဘူး။ Script ကပြင်ရင်တော့ ရနိုင်ပါတယ်။

ပထမတစ်ချက်အနေနဲ့ သိထားရမှာက Input element က value တွေကို Server ကိုပို့ဖို့အတွက် input element သည် enabled ဖြစ်ရပါမယ်။ ဒီတော့  readonly နဲ့ရေးထားတဲ့ textbox က value ကို server ကိုပို့တဲ့အခါမှာ ဒီအတိုင်းပို့နိုင်ပြီး disabled နဲ့ရေးထားတဲ့ textbox က value ကို server  ကိုပို့ဖို့အတွက် Script ကိုသုံးပြီး re-enabled လုပ်ဖို့လိုအပ်ပါလိမ့်မယ်။

အသုံးပြုတာနဲ့ပတ်သတ်ရင် Readonly ကို User ကလုံးဝ ပြောင်းလဲခွင့်မရှိတဲ့အခါမှာသုံးပါတယ်။ ဥပမာပြောရမယ်ဆိုရင် User Aggrement တိုင်းမှာတွေ့ရတဲ့ Terms and conditions ပေါ့ များသောအားဖြင့် textarea readonly နဲ့ရေးကြပါတယ်။ Disabled ကို User ကလက်ရှိပြောင်းလဲခွင့်မရှိပေမယ့် တစ်ချိန်ချိန် ပြောင်းလဲခွင့်ပေးနိုင်တဲ့ အခါမှာသုံးပါတယ်။ ဥပမာပြောရမယ်ဆိုရင် Information အပြည့်အစုံဖြည့်ပြီးမှာ Next Button နှိပ်ခွင့်ပေးတာမျိုးပေါ့။ Disabled ကို re-enabled လုပ်ဖို့ Script တော့လိုပါလိမ့်မယ်။

နောက်တစ်ချက်ကတော့ Form Controls တိုင်းမှာ ဒီ Attribute နှစ်ခုကို သုံးလို့ရမရပေါ့။ အောက်က ဇယားလေးကိုကြည့်လိုက်ရင် ရှင်းသွားပါလိမ့်မယ်။

ဒါကတော့ element တွေနဲ့ သူတို့သုံးလို့ရနိုင်တဲ့ attribute တွေကိုရေးထားတာပါ။ Readonly နဲ့ Disabled ရဲ့ လုပ်ဆောင်ချက်တွေကိုသိချင်သေးရင် အောက်ကဇယားမှာထပ်ပြထားပါတယ်။

ဒါကတော့ readonly နဲ့ disable ရဲ့ လုပ်နိုင်တဲ့ လုပ်ဆောင်ချက်တွေပါ။ ပထမသုံးချက်ကတော့ အပေါ်မှာရှင်းပြီးသားပါ။ readonly က script ကပဲ modified လုပ်နိုင်တယ် disabled ကတော့ ဒီ page မှာပဲ re-enabled ဖြစ်သွားရင် modified လုပ်နိုင်ပါတယ်။ Server ကိုပို့ချင်ရင်တော့ Enabled ဖြစ်မှပဲရပါလိမ့်မယ်။ Will receive focus ဆိုတာကတော့ Cursor ချလို့ရတာကိုပြောတာဖြစ်ပြီး Tabbing order ကတော့ User က Form ကို Tab (အနောက်ကိုသွားချင်ရင် Shift+Tab) နဲ့ လိုက်ဖြည့်တဲ့အခါမှာ tabindex attribute နဲ့  Order စီလို့ရမရကို ေပြောတာဖြစ်ပါတယ်။ ကျွန်တော်ရေးသမျှထဲမှာ အမှားပါခဲ့ရင် ကျွန်တော်စာဖတ်အား နည်းခြင်းကြောင့်ဖြစ်ပြီး နားမလည်တာရှိရင်ဖြစ်ဖြစ် အမှားပြင်ချင်ရင်ဖြစ်ဖြစ် Comment ပေးခဲ့ပြီး အားပေးနိုင်ပါတယ်။

One Response

1. Shwe Hlaing says:

   September 12, 2011 at 5:01 PM

   Good Job !!!

   Reply