Javascript Html Css Textarea Prototypejs

วิธีการปรับขนาดอัตโนมัติ Textarea โดยใช้ Prototype

เมื่อมองถึงการออกแบบฟอร์มสำหรับแอปพลิเคชันเว็บ ประสบการณ์ผู้ใช้ (UX) เป็นสิ่งสำคัญมาก ความท้าทายทั่วไปที่นักพัฒนาหลายคนพบคือวิธีการสร้าง textarea ที่ปรับขนาดโดยอัตโนมัติตามเนื้อหาที่ผู้ใช้ป้อน ฟีเจอร์นี้ไม่เพียงแต่ช่วยเพิ่มความสวยงามของฟอร์ม แต่ยังช่วยให้ผู้ใช้สามารถดูข้อมูลทั้งหมดโดยไม่ต้องเลื่อนหน้าจอโดยไม่จำเป็น ในโพสต์นี้เราจะสำรวจวิธีการใช้งานการปรับขนาดอัตโนมัติสำหรับ textarea ด้วยความช่วยเหลือของ Prototype JavaScript framework

ปัญหา

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

ความต้องการ

  • การปรับขนาดแนวตั้ง: textarea ควรขยายขึ้นตามแนวตั้งเมื่อผู้ใช้พิมพ์บรรทัดข้อความมากขึ้น
  • ความกว้างคงที่: ความกว้างควรมีความสอดคล้องกัน แต่ไม่ใช่สิ่งที่เน้นเท่ากับการปรับขนาดแนวตั้ง

แนวทางแก้ปัญหา

โชคดีที่มีวิธีที่ตรงไปตรงมาที่จะทำสิ่งนี้โดยใช้ Prototype.js ด้านล่างนี้ฉันจะพาคุณไปทำการติดตั้ง textarea ที่ปรับขนาดอัตโนมัติด้วยฟังก์ชัน JavaScript ง่ายๆ

ขั้นตอนที่ 1: ตั้งค่า HTML ของคุณ

เริ่มต้นคุณจะต้องโครงสร้าง HTML พื้นฐานสำหรับ textarea ของคุณ นี่เป็นการติดตั้งที่ง่าย:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script language="javascript">
            google.load('prototype', '1.6.0.2');
        </script>
    </head>
    <body>
        <textarea id="text-area" rows="1" cols="50"></textarea>
    </body>
</html>

ขั้นตอนที่ 2: เขียนฟังก์ชัน JavaScript

ถัดไปเราต้องการฟังก์ชัน JavaScript ที่จะจัดการการปรับขนาดอัตโนมัติ นี่คือวิธีการทำงาน:

  1. รับค่าปัจจุบันจาก textarea
  2. แยกข้อความออกเป็นบรรทัดตามอักขระขึ้นบรรทัดใหม่
  3. คำนวณจำนวนบรรทัดตามความกว้างของ textarea
  4. ตั้งค่าแอตทริบิวต์ rows ตามความเหมาะสม

นี่คือโค้ด:

<script type="text/javascript" language="javascript">
    resizeIt = function() {
        var str = $('text-area').value;
        var cols = $('text-area').cols;

        var linecount = 0;
        $A(str.split("\n")).each(function(l) {
            linecount += Math.ceil(l.length / cols); // พิจารณาบรรทัดที่ยาวด้วย
        })
        $('text-area').rows = linecount + 1; // เพิ่มจำนวนบรรทัด
    };

    // เชื่อมโยงฟังก์ชันกับเหตุการณ์ keydown
    Event.observe('text-area', 'keydown', resizeIt);
    
    resizeIt(); // เรียกฟังก์ชันครั้งหนึ่งเพื่อเริ่มต้น
</script>

ขั้นตอนที่ 3: การเริ่มต้น

ฟังก์ชันจะถูกเรียกใช้ทันทีเมื่อเอกสารโหลดทำให้แน่ใจว่า textarea ถูกปรับขนาดอย่างเหมาะสมตามเนื้อหาที่มีอยู่

การทดสอบและการปรับแต่ง

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

ความคิดสุดท้าย

การติดตั้ง textarea ที่ปรับขนาดอัตโนมัติสามารถสร้างประสบการณ์ของผู้ใช้ที่ราบรื่นขึ้นโดยการขจัดความยุ่งเหยิงที่ไม่จำเป็นจากฟอร์ม ตัวอย่างที่ให้แสดงถึงการติดตั้งพื้นฐานที่ใช้ Prototype JS framework แต่สามารถขยายหรือแก้ไขได้เพื่อให้เหมาะกับความต้องการที่ซับซ้อนยิ่งขึ้น

อย่าลังเลที่จะติดต่อหากคุณมีคำถามเพิ่มเติมหรือหากคุณต้องการแบ่งปันการปรับเปลี่ยนของคุณเองในวิธีแก้ปัญหานี้!