المربع النصي Text Box
المربع النصي كما سبق وأن ذكرنا في الفصل السابق: هو حقل نصي يقوم زائر الموقع بإدخال النص الذي يريد أرسالة إلى الموقع فيه كتعليقات الزوار، والتوقيع في سجل الزيارات، ويختلف المربع النصي عن الحقل النصي في أن المربع النصي، يمكن أن يحتوي على أكثر من سطر نصي، أما الحقل النصي فلا يحتوي سوى على سطر واحد فقط.
ويستخدم في إنشاء المربع النصي كود HTML كالتالي:
<textrea name= myTextArea cols=40 rows=20>Hello World Line2
</textarea>
ولكائن المربع النصي العديد من الخواص، مثل الخاصية cols والتي تمثل قيمتها عرض المربع النصي بعدد الأحرف، والخاصية rows والتي تمثل عدد الأسطر التي يمكن أن يستوعبها المربع النصي، wrap والتي تحدد قيمتها الطريقة التي يلتف بها النص في المربع النصي، والمثال التالي يوضح ذلك:
<html>
<head>
<script language= “JavaScript” type= “text/javascript”> function DisplayEvent(eventName)
{
Var myMessage = windows.document.form1.textarea2.value;
وبالمثال السابق يظهر مربعان نصيان كما يوضح الشكل التالي، وكلما قمت بتغيير النص الموجود في المربع النصي الموجود في اليسار، أو الضغط على أي مفتاح في لوحة المفاتيح، أو ترك هذا المفتاح تظهر عبارات جديدة في المربع النصي الموجود في اليمين.
في المثال السابق قمنا بإنشاء مربعين نصيين في علامة جسم الصفحة <body> أحد هذين المربعين يعرض الأحداث باستخدام دالة تسمي (DisplayEvent) لكل حدث من الأحداث الثلاثة onchange، و onkeydown، و onkeypress، و onkeyup، وذلك بالكود التالي:
<textarea rows= 15 cols= 40 name= textarea1 onchange= “DisplayEvent(‘onchange\n’);” onkeydown= “DisplayEvent(‘onkeydown\n’);” onkeypress=”DisplayEvent(‘onkeypress\n’);” onkeyup=”DisplayEvent(‘onkeyup\n\n’);”></textarea>
أما المربع النصي الثاني فهو مربع نصي فارغ تم إنشاؤه بالكود التالي:
<textarea rows=15 cols=40 name=textarea2></textarea>
وبالكود التالي تم إنشاء زر النموذج الذي يقوم بتفريغ الحقل النصي الذي يحتوي على الأحداث.
<input type= “button” value= “Clear Event Text Area” NAME= button1
Onclick= “window.document.form1. textarea2.value=””>
وبالكود التالي تم تعريف دالة DisplayEvent() التي تقوم بإظهار الأحداث في المربع النصي.
Function DisplayEvent(eventName)
{
Var myMessage = window.document.form1.textarea2.value;
myMessage = myMessage+eventName;
window.document.form1.textarea2.value = myMessage;
}
