ทุกครั้งที่ฉันพัฒนารูปแบบใหม่ที่รวมถึงtextareaฉันมีภาวะที่กลืนไม่เข้าคายไม่ออกต่อไปนี้เมื่อฉันต้องการระบุขนาดของมัน:

ใช้CSSหรือใช้textareaคุณสมบัติของcolsและrows?

ข้อดีและข้อเสียของแต่ละวิธีคืออะไร?

ความหมายของการใช้คุณลักษณะเหล่านี้คืออะไร?

ปกติแล้วจะทำอย่างไร?

ฉันแนะนำให้ใช้ทั้งคู่ จำเป็นต้องใช้แถวและ cols และมีประโยชน์หากไคลเอ็นต์ไม่สนับสนุน CSS แต่ในฐานะนักออกแบบฉันเขียนทับพวกเขาเพื่อให้ได้ขนาดที่ฉันต้องการ

วิธีที่แนะนำให้ทำคือใช้สไตล์ชีทภายนอกเช่น

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

textarea { height: auto; }

<textarea rows="10"></textarea>

วิธีนี้จะทำให้เบราว์เซอร์ตั้งค่าความสูงของ textarea ให้ตรงกับจำนวนของแถวบวกกับการขยายรอบ ๆ การตั้งค่าความสูง CSS เป็นจำนวนพิกเซลที่แน่นอนทำให้พื้นที่ว่างโดยพลการ

ตาม w3c, cols และแถวเป็นทั้งแอตทริบิวต์ที่จำเป็นสำหรับ textareas Rows and Cols คือจำนวนอักขระที่จะพอดีกับ textarea ไม่ใช่พิกเซลหรือค่าอื่น ๆ ไปกับแถว / cols

คำตอบคือ "ใช่" นั่นคือคุณควรใช้ทั้งคู่ ไม่มีแถวและ cols (และมีค่าเริ่มต้นแม้ว่าคุณจะไม่ได้ใช้อย่างชัดเจน) textarea นั้นมีขนาดเล็กอย่างผิดปกติหาก CSS ถูกปิดใช้งานหรือแทนที่โดยสไตล์ชีทของผู้ใช้ โปรดคำนึงถึงความสามารถในการเข้าถึงเสมอ ที่ถูกกล่าวว่าถ้าสไตล์ชีทของคุณได้รับอนุญาตให้ควบคุมลักษณะที่ปรากฏของ textarea คุณจะปิดท้ายด้วยบางสิ่งที่ดูดีขึ้นมากโดยรวมเข้ากับการออกแบบหน้าโดยรวมดีและสามารถปรับขนาดให้สอดคล้องกับการป้อนข้อมูลของผู้ใช้ ( ภายในขอบเขตของรสนิยมที่ดีแน่นอน)

สำหรับพื้นที่ข้อความเราสามารถใช้ css ด้านล่างเพื่อกำหนดขนาด

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

ทดสอบในเชิงมุมและเชิงมุม 7

 <textarea style="width:300px; height:150px;" ></textarea>

ขนาดของ textarea สามารถระบุได้โดยแอ็ตทริบิวต์ cols และแถวหรือดีกว่า; ผ่าน CSS 'คุณสมบัติความสูงและความกว้าง แอตทริบิวต์ cols ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด ความแตกต่างหลักอย่างหนึ่งคือนั่น<TEXTAREA ...>คือแท็กคอนเทนเนอร์: มันมีแท็กเริ่มต้น ()

ฉันมักจะไม่ได้ระบุheightแต่ไม่ระบุwidth: ...และและrowscols

โดยปกติในกรณีของฉันมีเพียงwidthและrowsจำเป็นสำหรับ textarea ที่ดูดีเมื่อเทียบกับคนอื่น ๆ (และcolsเป็นทางเลือกหากบางคนไม่ใช้ CSS ดังที่อธิบายไว้ในคำตอบอื่น ๆ )

((ระบุทั้งสองrowsและให้heightความรู้สึกเหมือนกับข้อมูลที่ซ้ำกันที่ฉันคิด))

คุณลักษณะที่สำคัญของ textareas คือสามารถขยายได้ ในหน้าเว็บนี้อาจส่งผลให้แถบเลื่อนปรากฏบนพื้นที่ข้อความหากความยาวข้อความเกินพื้นที่ที่คุณตั้งไว้ (ไม่ว่าจะใช้แถวหรือว่าใช้ CSS ซึ่งอาจเป็นปัญหาเมื่อผู้ใช้ตัดสินใจที่จะพิมพ์โดยเฉพาะอย่างยิ่ง 'การพิมพ์' เป็น PDF - ดังนั้นตั้งค่าความสูงขั้นต่ำสุดสำหรับ textareas ที่พิมพ์ด้วยกฎ CSS แบบมีเงื่อนไข:

@media print { 
textarea {
min-height: 900px;  
}
}

หากคุณไม่ใช้ทุกครั้งให้ใช้ความสูงของบรรทัด: '.. '; property ควบคุมความสูงของ textarea และ width เพื่อความกว้างของ textarea

หรือคุณสามารถใช้ประโยชน์จากขนาดตัวอักษรโดยทำตาม CSS:

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

แถวและคอลัมน์ HTML ไม่ตอบสนอง!

ดังนั้นฉันจึงกำหนดขนาดใน CSS เป็นเคล็ดลับ: ถ้าคุณกำหนดขนาดเล็กสำหรับโทรศัพท์มือถือคิดเกี่ยวกับการใช้textarea:focus {};

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

CSS

input
{
    width: 300px;
    height: 40px;
} 

HTML

<textarea rows="4" cols="50">HELLO</textarea>