شرح دوره الـ JavaScript للمبتدئين- الدرس الحادى والعشرون

text object

يكون شكله المستطيل الذى ندخل فيه البيانات مثل المستخدم فى ادخال الايميل والباسورد , وهو يعرض سطر واحد من النص (يمكن أن يكون ارقام او حروف) لان هنالك نوع آخر يسمى textarea وهذا يستخدم لاكثر من سطر والذى يمكن ان يحتوى على مسطره (scroll)

الشكل العام هو :

<input  type = " text "  name = " boxName "  value = " defaultValue "  size = " size " >

الخصائص (properties) الخاصه بـ (text object)

1. defaultValue ------> هى عباره عن قيمه نصيه ترجع لنا القيمه الابتدائيه التى تظهر فى text وهذه القيمه يتم كتابتها فى value attribute

2. value -------------> عباره عن قيمه نصيه ترجع لنا القيمه  الحاليه الموجوده فى text

3. name -------------> يستخدم ليرجع لنا اسم هذا object (القيمه المكتوبه فى name attribute)

4. maxLength -------> يستخدم ليرجع لنا (لبيان) اقصى عدد يمكن أن يكتب بداخل text , ويتم تحديده من خلال maxLength attribute

5. readOnly ---------> ترجع لنا قيمه boolean  اما true او false , فى حاله true تعنى أن text مستخدم للقراءه فقط ولا يمكن الكتابه بداخله  , اما فى حاله false تعنى أن text  يمكننا الكتابه بداخله 

6. size ---------------> يرجع لنا حجم الـ text والذى يحدد من خلال size attribute

مثــــــــال

لاستخدام الكود السابق يرجى ازاله وسوم التعليق --!> من البدايه و <--  من النهايه

عند تنفيذ الكود تظهر الصفحه التاليه ونلاحظ أنه مكتوب بداخل text القيمه الابتدائيه التى كتبت فى value attribute

عند مسح هذه القيمه الابتدائيه من text field الاول وكتابه أى كلمه مكانها وعند الضغط على button يظهر لنا الاتى

ونلاحظ ان السطر الاول مكتوب به default value وهى القيمه الابتدائيه التى كانت مكتوبه فى البدايه بداخل text ونلاحظ فى السطر الثانى مكتوب current value  وهى القيمه الحاليه التى تم ادخالها فى text field وهى كلمه Minds

وفى الصوره التاليه نرى اختلاف عرض text لاننا ادخلنا قيمتين مختلفتين فى size attribute لكل منها

methods الخاصه بـ text object

1. ( ) focus  ---------> تستخدم لتحريك المؤشر (cursor) على text بمعنى انه يتم التركيز على text field كأنه محدد

2. ( ) select ---------> تستخدم لتحديد محتوى text بمعنى تحدد النص المكتوب بداخل text

3. ( ) blur -----------> تستخدم لتحريك المؤشر بعيدا عن text بمعنى انها تعتبر عكس عمل ( )focus

مثـــــــال

لاستخدام الكود السابق يرجى ازاله وسوم التعليق --!> من البدايه و <--  من النهايه

*عند تنفيذ الكود نرى الصفحه التاليه

 *عند لضغط بداخل text الاول وبعد ذلك الضغط خارجه تظهر لنا الصوره التاليه

 * وذلك بسبب اننا قمنا بعمل شرط فى حاله أن المستخدم ترك الخانه فارغه وضغط بخارج هذه الخانه يتم تنبيه انه يجب ادخال بيانات بها وعند الضغط علىok  نلاحظ الصوره التاليه

*نلاحظ ان المؤشر حدد الـ text الاول لاننا استخدمنا focus ( ) method , وعند الانتقال الى text الثانى والضغط على button نرى الاتى

*وعند الضغط على موافق نرى ان text الثانى تم تحديده كأننا وقفنا عليه وذلك لاستخدام focus( ) method ونرى ان المحتوى الذى بداخل text تم تحديده لاننا استخدمنا select( ) method