การปรับขนาดช่องของ CSS

โค้ด 1 บรรทัดสำหรับองค์ประกอบการปรับขนาดอัตโนมัติที่มีเนื้อหาที่แก้ไขได้

Adam Argyle

หากไม่มี field-sizing คุณจะต้องเดาขนาดเฉลี่ยของช่องป้อนข้อมูลข้อความหรือใช้ JavaScript เพื่อนับอักขระและเพิ่มความสูงหรือความกว้างขององค์ประกอบเมื่อผู้ใช้ป้อนข้อความ เพื่อสร้างช่องป้อนข้อมูลที่มีขนาดเหมาะสม กล่าวคือ การติดตามเนื้อหาที่ผู้ใช้ป้อนลงในอินพุตนั้นไม่ใช่เรื่องง่ายและมีแนวโน้มที่จะเกิดข้อผิดพลาด

เมื่อใช้ field-sizing คุณต้องใช้ CSS 1 บรรทัดเพื่อเปิดใช้การปรับขนาดตามเนื้อหา รูปแบบการปรับขนาดตามเนื้อหานี้ยังใช้ได้กับองค์ประกอบอื่นๆ นอกเหนือจาก textarea ด้วย

textarea, select, input {
  field-sizing: content;
}

ลิงก์ด่วน

ข้อกำหนด | ผู้อธิบาย

ชอบวิดีโอแบบสั้นใช่ไหม

Wes Bos และ Jhey ต่างก็มีวิดีโอที่ยอดเยี่ยมบน Twitter ที่จะแนะนำให้คุณรู้จักกับ field-sizing

องค์ประกอบใดบ้างที่ได้รับผลกระทบจาก field-sizing

รายการองค์ประกอบ <form> ที่ field-sizing ทำงานด้วย พร้อมสรุปผลกระทบที่มีต่อแต่ละองค์ประกอบมีดังนี้

<textarea>

ข้อมูลที่ป้อนจะยุบลงเหลือ min-inline-size หรือพอดีกับตัวยึดตำแหน่ง

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

<select> และ <select multiple>

องค์ประกอบที่เลือกจะหดลงเพื่อให้พอดีกับตัวเลือกที่เลือก

องค์ประกอบ select ที่มีแอตทริบิวต์ multiple จะขยายให้พอดีกับตัวเลือกที่กว้างที่สุดและสูงเท่าที่จำเป็นเพื่อให้พอดีกับจำนวนตัวเลือก

<input type="text">, <input type="email"> และ <input type="number">

ข้อมูลที่ป้อนจะยุบลงเหลือ min-inline-size หรือพอดีกับตัวยึดตำแหน่ง

เมื่อผู้ใช้พิมพ์ ข้อมูลที่ป้อนจะขยายในทิศทางแบบอินไลน์จนกว่าจะถึง max-inline-size ซึ่งเมื่อถึงจุดนั้น ข้อมูลที่ป้อนจะถูกตัดออกเนื่องจากเกินขีดจำกัด

<input type="file">

อินพุตจะยุบลงเหลือเพียงปุ่มและข้อความชื่อไฟล์ที่กรอกไว้ล่วงหน้า

เมื่ออัปโหลดไฟล์ อินพุตจะกว้างเท่ากับปุ่มบวกข้อความชื่อไฟล์

การดู การทดสอบ และการเปรียบเทียบผลลัพธ์

ต่อไปนี้คือตัวอย่างแบบอินเทอร์แอกทีฟและเรียบง่ายของลักษณะการทำงานก่อนและหลังขององค์ประกอบแบบฟอร์มแต่ละรายการที่ได้รับผลกระทบจาก field-sizing

กำลังดูรายละเอียดเพิ่มเติม

เมื่อใช้ [placeholder] ตัวยึดตำแหน่งจะกลายเป็นเนื้อหา เราได้พูดถึงเรื่องนี้ไปแล้ว แต่จะขอย้ำอีกครั้งเนื่องจากเป็นสิ่งสำคัญที่ควรทราบเมื่อจัดรูปแบบฟอร์ม ตัวยึดตำแหน่งแบบยาวหรือสั้นจะเปลี่ยนขนาดที่แท้จริงของอินพุตด้วย field-sizing: content

การจัดการสไตล์ที่ว่างเปล่าและล้น

การใช้ field-sizing หมายความว่าคุณต้องดำเนินการเพิ่มเติมบางอย่าง Ahmad Shadeed เรียกสิ่งนี้ว่า "CSS เชิงป้องกัน" ซึ่งเป้าหมายไม่ใช่การระบุลักษณะการทำงานหรือรูปลักษณ์ของสิ่งต่างๆ อย่างชัดเจน แต่เป็นการป้องกันไม่ให้เกิดสถานะภาพที่ไม่พึงประสงค์ ก่อนหน้านี้ อินพุตมีขนาดคงที่พอสมควร แต่หลังจากใช้ field-sizing: content อินพุตอาจมีขนาดเล็กเกินไปหรือใหญ่เกินไป

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

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

CSS นี้ใช้หน่วยสัมพัทธ์สำหรับการกำหนดขนาด หน่วย lh ใหม่เหมาะอย่างยิ่งสำหรับขนาดบล็อก และ ch เหมาะสำหรับขนาดในบรรทัด

ค่าเริ่มต้นของ field-sizing คืออะไร

ค่าเริ่มต้นของ field-sizing คือ fixed และยอมรับเฉพาะค่า fixed หรือ content เท่านั้น