يسمى Textarea حقل النص ، المعروف أيضًا باسم منطقة النص ، وهو عنصر تحكم في إدخال النص متعدد الخطوط مع أشرطة التمرير ، والتي يتم استخدامها غالبًا في نماذج تقديم صفحة الويب. على عكس عنصر تحكم نص مربع نص واحد ، لا يمكن أن يحد من عدد الكلمات من خلال خاصية MaxLength ، ولهذا الغرض ، يجب البحث عن طرق أخرى لتلبية متطلبات الإعداد المسبق.
تتمثل الممارسة المعتادة في استخدام لغة #Script لتنفيذ حدود إدخال الكلمات على حقول نص Textarea ، وهي بسيطة وعملية. لنفترض أن لدينا منطقة نص Textarea مع ID TXTA1 ، يمكننا الحد من عدد إدخال الكلمات على لوحة المفاتيح إلى 10 أحرف (أحرف صينية أو أحرف زاوية صغيرة أخرى):
<script language = "#" type = "text/ecmascript"> window.onload = function () {document.getElementById ('txta1'). onKeyDown = function () {if (this.value.length> = 10) event.ReturnValue = false ؛ }} </script>يتمثل مبدأها في مراقبة مساحة النص لرقم المعرف المحدد من خلال مراقبة حدث KeyDown. يمكن تخيل أنه يمكن أن يحد فقط من إدخال لوحة المفاتيح. إذا كان المستخدم يلصق النص الموجود في الحافظة بالنقر بزر الماوس الأيمن ، فلن يتمكن من التحكم في عدد الكلمات.
من خلال إدخال لوحة المفاتيح ، يمكن إدخال 10 كلمات فقط في منطقة النص أعلاه. ومع ذلك ، لم يتحقق هدفنا! يرجى نسخ بعض النصوص بشكل عرضي ومحاولة لصقها باستخدام زر الماوس الأيمن لمعرفة ما يجري.
يمكنك العثور على نصوص JS أخرى مثل ما ذكر أعلاه على الإنترنت. بغض النظر عن مدى ممتازة ، مبادئهم هي نفسها. لا يمكن لمراقبة مدخلات منطقة النص عن طريق تشغيل مفاتيح لوحة المفاتيح مثل KeyDown أو Keyup أو Keypress منع النقر بزر الماوس الأيمن من اللصق. لهذا السبب ، إذا كان يجب علينا أن نحد من عدد الكلمات في Textarea ، فيجب علينا إضافة قفل آخر إلى صفحة الويب - تعطيل النقر بزر الماوس الأيمن ، والذي يتطلب بلا شك أن النفقات العامة إضافية ، وقد يكون أيضًا شيء قد لا يكون صانعي صفحات الويب على استعداد للقيام به. في الواقع ، هناك طريقة أسهل لاستخدام خاصية OnPropertyChange.
يمكن استخدام OnPropertyChange للحكم على قيمة عنصر محدد مسبقًا. عندما تتغير قيمة العنصر ، سيتم تشغيل حدث الحكم. إنه يهتم فقط بقيمة العنصر المراقب ويتجنب مصدر المدخلات ، حتى نتمكن من تحقيق الغرض من الحد من عدد الكلمات بطريقة مثالية نسبيًا. ينتمي إلى فئة JS ويمكن استخدامه في ممثلي منطقة صندوق النماذج المتداخلة. فيما يلي أنماط الكود وأنماط التأثير. يمكنك اختبار المدخلات مثل ما سبق. ستجد أنه يحقق حقًا غرضه: بغض النظر عن الطريقة التي تدخل بها ، يمكنها فقط إدخال 100 حرف (أحرف صينية أو رموز حلول صغيرة أخرى):
شفرة:
<textarea onPropertyChange = "if (value.length> 100) value = value.substr (0،100)" cols = "60" name = "txta" rows = "8"
بالطبع ، لكي تكون أكثر أمانًا ، يجب أن يقوم برنامج البرنامج النصي للخلفية الذي يعالج البيانات بالتحقق من البيانات المقدمة مرة أخرى. إذا تجاوز عدد الكلمات رقم الإعداد المسبق ، فسيتم معالجته وفقًا لذلك ، وذلك لتحقيق الغرض من الحد من عدد الكلمات. (زيادة)
طريقة أخرى لتنفيذ TextArea للحد من عدد كلمات الإدخال (بما في ذلك الصينية ، يمكن إدخال 10 فقط ، ويمكن إدخال جميع رموز ASCII)
<script> check () {var regc = /[^ -~]+ /g ؛ var rege = // d+/g ؛ var str = t1.value ؛ if (regc.test (str)) {t1.value = t1.value.substr (0،10) ؛ } if (rege.test (str)) {t1.value = t1.value.substr (0،20) ؛ }} </script> <textarea maxlength = "10" id = "t1" onKeyup = "check () ؛"> </swertarea>هناك طريقة أخرى:
وظيفة textCounter (الحقل ، maxlimit) {if (field.value.length> maxlimit) {field.value = field.value.substring (0 ، maxlimit) ؛ } آخر {document.upbook.remlen.value = maxlimit - field.value.length ؛ }}<textarea name = words cols = 19 rows = 5 class = input1 onPropertyChange = "TextCounter (upbook.words ، 50)
وظيفة limittextarea (الحقل) {maxlimit = 200 ؛ if (field.value.length> maxlimit) field.value = field.value.substring (0 ، maxlimit) ؛}<textarea cols = 50 rows = 10 name = "comment" id = "commentArea" onKeyDown = "LimitTextarea (this)" onKeyup = "limittextarea (this)" onkeypress = "limittextarea (this)"> </textarea>
العنوان = "يجب أن يقل عرض Textarea أقل من 300 حرف." يطالب بإدخال الحد الأقصى لعدد البايتات في Textarea.
على سبيل المثال:
<textarea cols = 50 rows = 10 name = "comment" id = "commentArea" onKeyDown = "LimitTextarea (this)" onKeyup = "limittextarea (this)" onkeypress = "limittextarea (this)"> </textarea>