ใน HTML พื้นที่ข้อความมักจะอนุญาตให้ผู้ใช้ปรับขนาดได้โดยการลากมุมขวาล่าง อย่างไรก็ตาม บางครั้งเราอาจต้องการปิดการใช้งานลักษณะการลากด้วยตนเองเพื่อแก้ไขขนาดของช่องข้อความ เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถใช้คุณสมบัติปรับขนาด CSS ได้
ขั้นตอนเฉพาะมีดังนี้:
ค้นหาองค์ประกอบพื้นที่ข้อความ (textarea) ที่ต้องปิดการใช้งานในไฟล์ HTML
เพิ่มสไตล์ CSS ให้กับองค์ประกอบช่องข้อความและตั้งค่าแอตทริบิวต์การปรับขนาดเป็น none การดำเนินการนี้จะปิดการใช้งานผู้ใช้จากการลากเพื่อปรับขนาดช่องข้อความ
นี่เป็นตัวอย่างง่ายๆ:
<!DOCTYPE html>
<html lang="th">
<หัว>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale=1.0">
<title>เอกสาร</title>
<สไตล์>
พื้นที่ข้อความ {
ปรับขนาด: ไม่มี; /* ปิดการใช้งานผู้ใช้จากการลากและปรับขนาดด้วยตนเอง */
-
</สไตล์>
</หัว>
<ร่างกาย>
<textarea name="" id="" cols="30" rows="10">นี่คือเนื้อหาพื้นที่ข้อความ</textarea>
</ร่างกาย>
</html> ในตัวอย่างข้างต้น เราตั้ง resize: none; style สำหรับองค์ประกอบ textarea ดังนั้นจึงป้องกันไม่ให้ผู้ใช้ปรับขนาดโดยการลาก
ในตัวอย่างข้างต้น เราตั้งค่า resize: none; style สำหรับองค์ประกอบ textarea ดังนั้นจึงป้องกันไม่ให้ผู้ใช้ปรับขนาดโดยการลาก
โปรดทราบว่าแม้ว่าวิธีนี้จะใช้ได้ผลดีในเบราว์เซอร์สมัยใหม่ส่วนใหญ่ แต่เพื่อให้มั่นใจถึงความเข้ากันได้ ควรทดสอบอย่างละเอียดก่อนใช้งานจริง นอกจากนี้ แอตทริบิวต์การปรับขนาดยังเป็นคุณสมบัติ CSS3 ดังนั้นจึงอาจไม่รองรับเบราว์เซอร์รุ่นเก่าบางรุ่น หากคุณต้องการรองรับเบราว์เซอร์เหล่านี้ คุณอาจต้องพิจารณาใช้วิธีการอื่นหรือเสนอตัวเลือกดาวน์เกรด
บทความนี้จะสรุปเกี่ยวกับวิธีตั้งค่าช่องข้อความ HTML เพื่อห้ามผู้ใช้ลากด้วยตนเอง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ HTML ที่ห้ามไม่ให้ผู้ใช้ลากด้วยตนเอง โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องด้านล่างต่อไป downcodes.com มากขึ้นในอนาคต!