Textarea เรียกว่าฟิลด์ข้อความหรือที่เรียกว่าพื้นที่ข้อความซึ่งเป็นตัวควบคุมอินพุตข้อความหลายบรรทัดพร้อมแถบเลื่อนซึ่งมักใช้ในแบบฟอร์มการส่งหน้าเว็บ ซึ่งแตกต่างจากการควบคุมข้อความกล่องข้อความบรรทัดเดียวไม่สามารถ จำกัด จำนวนคำผ่านคุณสมบัติ MaxLength และเพื่อจุดประสงค์นี้จะต้องมีวิธีการอื่น ๆ เพื่อ จำกัด ให้ปฏิบัติตามข้อกำหนดที่ตั้งไว้ล่วงหน้า
การปฏิบัติตามปกติคือการใช้ภาษา #Script เพื่อใช้ขีด จำกัด การป้อนข้อมูลคำบนฟิลด์ข้อความข้อความซึ่งง่ายและใช้งานได้จริง สมมติว่าเรามีพื้นที่ข้อความ textarea พร้อม ID txta1 เราสามารถ จำกัด จำนวนคำที่ป้อนบนคีย์บอร์ดเป็น 10 อักขระ (อักขระจีนหรืออักขระมุมเล็ก ๆ อื่น ๆ ):
<script language = "#" type = "text/ecmascript"> window.onload = function () {document.getElementById ('txta1'). onkeydown = function () {if (this.value.length> = 10) เหตุการณ์ returnvalue = false; }} </script>หลักการของมันคือการตรวจสอบพื้นที่ข้อความของหมายเลข ID ที่ระบุโดยการตรวจสอบเหตุการณ์ 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>
แน่นอนเพื่อให้ปลอดภัยยิ่งขึ้นโปรแกรมสคริปต์พื้นหลังที่ประมวลผลข้อมูลแบบฟอร์มควรตรวจสอบข้อมูลที่ส่งอีกครั้ง หากจำนวนคำเกินจำนวนที่ตั้งไว้จะถูกประมวลผลตามเพื่อให้บรรลุวัตถุประสงค์ในการ จำกัด จำนวนคำอย่างแท้จริง (เกิน)
อีกวิธีหนึ่งในการใช้ Textarea เพื่อ จำกัด จำนวนคำที่ป้อนเข้า (รวมถึงภาษาจีนเท่านั้นที่สามารถป้อนได้เพียง 10 รายการและสามารถป้อนรหัส ASCII ทั้งหมดได้)
<script> ฟังก์ชั่นตรวจสอบ () {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 ();"> </textarea>มีวิธีอื่น:
ฟังก์ชั่น textCounter (ฟิลด์, maxlimit) {if (field.value.length> maxlimit) {field.value = field.value.substring (0, maxlimit); } else {document.upbook.remlen.value = maxlimit - field.value.length; -<textarea name = words cols = 19 rows = 5 class = input1 onPropertyChange = "textCounter (upbook.words, 50)"> textarea> จำนวนคำที่เหลืออยู่: <ชื่ออินพุต = remlen type = text id = "remlen" remlen "
ฟังก์ชั่น 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 (นี่)" onkeyup = "LimitTextArea (นี่)" onkeypress = "LimitTextArea (นี่)"> </textarea>
title = "ความกว้าง textarea ต้องน้อยกว่า 300 อักขระ" มันแจ้งให้ป้อนจำนวนไบต์สูงสุดใน textarea
ตัวอย่างเช่น:
<textarea cols = 50 rows = 10 name = "comment" id = "commentarea" onkeydown = "LimitTextArea (นี่)" onkeyup = "LimitTextArea (นี่)" onkeypress = "LimitTextArea (นี่)"> </textarea>