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

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

Adam Argyle

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

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

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

ลิงก์ด่วน

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

หากชอบวิดีโอแบบสั้น

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

องค์ประกอบใดบ้างที่ได้รับผลกระทบจากการปรับขนาดช่อง

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

<textarea>

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

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

<select> และ <select multiple>

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

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

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

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

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

<input type="file">

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

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

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

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

ลองใช้กับ Codepen

มองใกล้

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

ลองใช้กับ Codepen

การจัดการรูปแบบที่ว่างเปล่าและล้น

การใช้ field-sizing หมายความว่าคุณต้องทำงานเพิ่มเติม Ahmad Shadeed เรียกสิ่งนี้ว่า "Protectensive 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 คือ fixed และยอมรับเพียงค่า fixed หรือ content 2 ค่าเท่านั้น