Javascript Html Cross Browser Textarea

วิธีตั้งค่า ความยาวสูงสุด สำหรับ HTML <textarea>: ทางออกที่รองรับหลายเบราว์เซอร์

เมื่อออกแบบแอปพลิเคชันเว็บหรือฟอร์ม การรับรองว่าผู้ใช้ไม่ป้อนข้อความมากเกินไปอาจเป็นสิ่งสำคัญสำหรับการรักษาความสมบูรณ์ของข้อมูลและการปรับปรุงประสบการณ์ของผู้ใช้ การจำกัดจำนวนอักขระที่สามารถพิมพ์ใน HTML <textarea> เป็นความต้องการทั่วไป อย่างไรก็ตาม ความท้าทายเกิดขึ้นจากการที่ HTML มาตรฐานไม่มีแอตทริบิวต์ MAXLENGTH ในองค์ประกอบ <textarea> แตกต่างจากฟิลด์ <input> ในโพสต์นี้เราจะสำรวจวิธีการที่มีประสิทธิภาพในการบังคับใช้ข้อจำกัดของอักขระในข้อมูลที่ป้อนใน <textarea> เพื่อให้แน่ใจว่ามีความเข้ากันได้กว้างขวางระหว่างเบราว์เซอร์

ความท้าทายใน <textarea>

เบราว์เซอร์ส่วนใหญ่ในปัจจุบันไม่รองรับแอตทริบิวต์ MAXLENGTH สำหรับแท็ก <textarea> ข้อจำกัดนี้หมายความว่านักพัฒนาจำเป็นต้องนำวิธีการของตนเองมาใช้เพื่อจำกัดความยาวของข้อมูลทั้งในขณะพิมพ์และวาง

การจำกัดการพิมพ์ง่าย ๆ

วิธีที่รวดเร็วและตรงไปตรงมาคือการใช้เหตุการณ์ onKeyPress เพื่อจำกัดการป้อนข้อมูลระหว่างที่พิมพ์:

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

  • คำอธิบาย:

    • บรรทัด this.value.length < 50 ตรวจสอบความยาวปัจจุบันของข้อความใน <textarea>
    • หากความยาวน้อยกว่า 50 จะอนุญาตให้ป้อนอักขระใหม่ ถ้าถึง 50 มันจะป้องกันไม่ให้ป้อนต่อไป

  • ข้อเสีย:

    • วิธีนี้ยังป้องกันการกด backspace ซึ่งอาจทำให้ผู้ใช้รู้สึกหงุดหงิดเมื่อพวกเขาจำเป็นต้องลบอักขระ

การจัดการปัญหาการวาง

หนึ่งในแง่มุมที่สำคัญของการจำกัดการป้อนข้อมูลคือการจัดการกับเนื้อหาที่ถูกวาง เหตุการณ์ onKeyPress ไม่สามารถจับการวางได้ ทำให้ผู้ใช้สามารถป้อนข้อมูลเกินขีดจำกัดที่ตั้งไว้โดยไม่รู้ตัว เพื่อเพิ่มการจำกัดการวาง โดยเฉพาะใน Internet Explorer (IE) คุณสามารถใช้โค้ดต่อไปนี้:

<textarea 
    onKeyPress="return ( this.value.length < 50 );"
    onPaste="return (( this.value.length + window.clipboardData.getData('Text').length) < 50 );"></textarea>

  • คำอธิบาย:

    • ตัวจัดการ onPaste จะตรวจสอบว่าผลรวมของความยาวข้อความที่มีอยู่และความยาวที่วางเกิน 50 หรือไม่

  • ข้อจำกัด:

    • วิธีนี้ใช้ได้เฉพาะกับ IE 5 ขึ้นไป สำหรับเบราว์เซอร์ที่ทันสมัย คุณจะต้องมีกลยุทธ์ที่แตกต่างออกไป

ทางออกที่รองรับหลายเบราว์เซอร์

เนื่องจากเวอร์ชัน IE ที่เก่า ๆ รองรับเหตุการณ์เหล่านี้ แต่เบราว์เซอร์สมัยใหม่ไม่รองรับ ทางออกที่มีความเฉพาะเจาะจงมากยิ่งขึ้นคือการใช้เหตุการณ์ onChange หรือ onBlur เพื่อตรวจสอบความยาวของข้อความหลังจากการมีปฏิสัมพันธ์ของผู้ใช้:

  • ตัวอย่าง:
<textarea onBlur="if(this.value.length > 50) { alert('เกินความยาวสูงสุด!'); this.value = this.value.substring(0, 50); }"></textarea>
  • ประโยชน์:
    • นี้จะช่วยแจ้งให้ผู้ใช้ทราบหากพวกเขาเกินความยาวและสามารถปรับแต่งเพื่อให้ประสบการณ์ผู้ใช้ดียิ่งขึ้น เช่น การตัดข้อความหรือให้ข้อเสนอแนะแบบภาพ

แหล่งข้อมูลเพิ่มเติม

สำหรับสคริปต์และตัวอย่างในหัวข้อนี้เพิ่มเติม ลองตรวจสอบแหล่งข้อมูลต่อไปนี้:

สรุป

การนำข้อจำกัดของอักขระไปใช้ใน HTML <textarea> ต้องพิจารณาประสบการณ์ของผู้ใช้และความเข้ากันได้ของหลายเบราว์เซอร์อย่างรอบคอบ โดยการใช้ตัวจัดการเหตุการณ์อย่างมีกลยุทธ์ คุณสามารถจัดการความยาวของข้อมูลได้อย่างมีประสิทธิภาพ ทำให้การมีปฏิสัมพันธ์ที่ราบรื่นและมีการควบคุมมากขึ้น จำไว้ว่าคุณควรทดสอบในเบราว์เซอร์ที่แตกต่างกันเพื่อให้แน่ใจว่าวิธีแก้ไขของคุณทำงานได้ทั่วถึง! ขอให้สนุกกับการเขียนโค้ด!