ฉันจะปิดใช้งานคุณสมบัติที่ปรับขนาดได้ของ textarea ได้อย่างไร

2649

textareaฉันต้องการที่จะปิดการใช้งานปรับขนาดได้ทรัพย์สินของ

ขณะนี้ฉันสามารถปรับขนาดได้textareaโดยคลิกที่มุมล่างขวาของtextareaและลากเมาส์ ฉันจะสามารถปิดการใช้งานนี้หรือไม่?

html css

4

@JDIsaaks - เพิ่มเติมการอนุญาตให้ปรับขนาดในบางสถานการณ์สามารถทำลายเค้าโครงและ printabilit (ส่วนที่สำคัญของโครงการที่มีความสำคัญต่อภารกิจปัจจุบัน)

— random_user_name

10

บางครั้งคุณต้องการให้ textarea ที่ไม่สามารถปรับขนาดได้ ยกตัวอย่างเช่นในกรณีนี้เมื่อคุณ (ตามเงื่อนไข) แปลง textarea เข้าไปในสิ่งที่มีลักษณะเช่นเดียวกับป้ายกำกับ มันดูแปลกจริงๆที่มีป้ายกำกับพร้อมตัวจับแบบลอยตัวแบบสุ่มออกไปด้านข้าง

— neminem

2

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

— แสงสว่าง

3531

กฎ CSS ต่อไปนี้ปิดใช้งานพฤติกรรมการปรับขนาดสำหรับtextareaองค์ประกอบ:

textarea {
  resize: none;
}

ปิดการใช้งานสำหรับบางคน ( แต่ไม่ใช่ทั้งหมด) textareas มีสองตัวเลือก

เพื่อปิดการใช้งานที่เฉพาะเจาะจงtextareaกับnameชุดแอตทริบิวต์foo(คือ<textarea name="foo"></textarea>):

textarea[name=foo] {
  resize: none;
}

หรือใช้idแอตทริบิวต์ (เช่น<textarea id="foo"></textarea>):

#foo {
  resize: none;
}

หน้า W3Cรายการค่าที่เป็นไปได้สำหรับการปรับขนาดข้อ จำกัด : ไม่มีทั้งแนวนอนแนวตั้งและสืบทอด:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

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

สำคัญอย่างยิ่งที่จะรู้:

คุณสมบัตินี้ไม่ทำอะไรเลยเว้นแต่คุณสมบัติโอเวอร์โฟลเป็นสิ่งอื่นที่มองเห็นได้ซึ่งเป็นค่าเริ่มต้นสำหรับองค์ประกอบส่วนใหญ่ ดังนั้นโดยทั่วไปเมื่อต้องการใช้สิ่งนี้คุณจะต้องตั้งค่าบางอย่างเช่นโอเวอร์โฟลว์: เลื่อน;

อ้างอิงโดย Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

— โดนัท
แหล่งที่มา

มีวิธีแก้ปัญหาสำหรับ Firefox, Opera และ / หรือ IE หรือไม่?

— Sime Vidas

6

@ Šime IE และ FF3 (และก่อนหน้า) ไม่เพิ่มการปรับขนาดการสนับสนุนดังนั้นจึงไม่จำเป็นต้องแก้ปัญหา สำหรับ FF4 โซลูชันนี้ควรใช้งานได้

— โดนัท

24

ตามdavidwalsh.name/textarea-resize - ใช้การปรับขนาด: แนวตั้งหรือปรับขนาด: แนวนอนเพื่อ จำกัด การปรับขนาดเป็นหนึ่งมิติ หรือใช้ความกว้างสูงสุดความสูงสูงสุดความกว้างต่ำสุดและความสูงต่ำสุด

— Jon Hulka

3

ฉันเป็นคนเดียวที่พบว่ามันแปลกในการตั้งค่านี้โดยใช้ CSS และไม่ใช่คุณลักษณะ? ทำไมฉันไม่สามารถตั้งค่าแล้วปิดการใช้งานหรือการตรวจสอบหรือคุณสมบัติอื่น ๆ ที่ใช้ CSS ...

— Buksy

6

@ Buksy เพราะ "ปิดการใช้งาน" เป็นสถานะไม่ใช่คุณสมบัติภาพ ดังนั้นมันจึงเป็นเหตุผลที่ไม่ควรตัดสินใจด้วยภาษาการออกแบบ

— Kroltan

206

ใน CSS ...

textarea {
    resize: none;
}

— Jeff Parker
แหล่งที่มา

105

ฉันพบสองสิ่ง:

เป็นครั้งแรก

textarea{resize: none}

นี่คือ CSS 3 ซึ่งไม่ได้รับการปล่อยตัวออกมาเลยเข้ากันได้กับFirefox 4 (และต่อมา) Chrome และ Safari

คุณสมบัติรูปแบบอื่นคือการoverflow: autoกำจัดแถบเลื่อนด้านขวาโดยคำนึงถึงแอตทริบิวต์dir

รหัสและเบราว์เซอร์ต่าง ๆ

HTML พื้นฐาน

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

เบราว์เซอร์บางตัว

Internet Explorer 8

ป้อนคำอธิบายภาพที่นี่

Firefox 17.0.1

ป้อนคำอธิบายภาพที่นี่

โครเมียม

ป้อนคำอธิบายภาพที่นี่

— Rami Jamleh
แหล่งที่มา

62

CSS 3 มีคุณสมบัติใหม่สำหรับองค์ประกอบ UI ที่จะช่วยให้คุณทำเช่นนี้ได้ สถานที่ให้บริการเป็นสถานที่ให้บริการปรับขนาด ดังนั้นคุณจะเพิ่มสิ่งต่อไปนี้ลงในสไตล์ชีทของคุณเพื่อปิดใช้งานการปรับขนาดองค์ประกอบข้อความทั้งหมด:

textarea { resize: none; }

นี่คือคุณสมบัติ CSS 3 ใช้แผนภูมิความเข้ากันได้เพื่อดูความเข้ากันได้ของเบราว์เซอร์

โดยส่วนตัวแล้วฉันจะพบว่ามันน่ารำคาญมากที่ต้องปิดการใช้งานการปรับขนาดในองค์ประกอบ textarea นี่เป็นหนึ่งในสถานการณ์ที่นักออกแบบพยายาม "หยุด" ลูกค้าของผู้ใช้ หากการออกแบบของคุณไม่สามารถรองรับ textarea ขนาดใหญ่คุณอาจต้องการพิจารณาว่าการออกแบบของคุณทำงานอย่างไร ผู้ใช้สามารถเพิ่มtextarea { resize: both !important; }สไตล์ชีทของผู้ใช้เพื่อแทนที่การตั้งค่าของคุณ

— James Sumners
แหล่งที่มา

แต่นั่นจะเป็นผู้ใช้โดยเจตนาแบ่งเลย์เอาท์ของพวกเขาแทนที่จะเป็นผู้ใช้ที่ต้องการปรับขนาดของเขา / เธอtexareaและทำให้บางสิ่งบางอย่างไม่ทำงาน

— Redwolf Programs

25

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

— Imtiaz Ali Baigal
แหล่งที่มา

21

หากคุณต้องการความช่วยเหลืออย่างลึกซึ้งคุณสามารถใช้เทคนิคของโรงเรียนเก่า:

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}

— Yevgeniy
แหล่งที่มา

7

ใช้resize:noneกับโซลูชันนี้เพื่อป้องกันไม่ให้ที่จับปรากฏขึ้นที่มุมด้านล่างซึ่งน่าผิดหวังไม่ทำงาน

— MacroMan

13

สิ่งนี้สามารถทำได้ในรูปแบบ HTML ได้อย่างง่ายดาย:

<textarea name="textinput" draggable="false"></textarea>

มันใช้งานได้สำหรับฉัน ค่าเริ่มต้นtrueสำหรับdraggableแอตทริบิวต์

— ดังนี้แหละ
แหล่งที่มา

นี่คือคุณลักษณะ HTML 5 ดังนั้นเฉพาะเบราว์เซอร์ที่ใหม่กว่าเท่านั้นที่จะรองรับ ฉันอ่านบางที่ IE รองรับตั้งแต่ 9 เป็นต้นไป

— Antony D'Andrea

4

สิ่งนี้ทำงานได้ในเบราว์เซอร์ส่วนใหญ่ ในทุกเบราว์เซอร์ล่าสุด

— ดังนี้ดังนั้น Wickramasinghe

มันจะไม่ป้องกัน textarea จากการปรับขนาด

— Mishko Vladimir

@ AntonyD'Andrea สิ่งนี้ไม่ทำงานบน Chrome ล่าสุด: jsfiddle.net/ps2v8df9

— Advait Junnarkar

6

หากต้องการปิดใช้งานคุณสมบัติการปรับขนาดใช้คุณสมบัติ CSS ต่อไปนี้:

resize: none;

คุณสามารถใช้สิ่งนี้เป็นคุณสมบัติรูปแบบอินไลน์เช่น:
```
<textarea style="resize: none;"></textarea>
```
หรือในระหว่าง<style>...</style>แท็กองค์ประกอบเช่น:
```
textarea {
    resize: none;
}
```

— Webeng
แหล่งที่มา

6

คุณเพียงแค่ใช้: resize: none;ใน CSS ของคุณ

ปรับขนาดระบุคุณสมบัติหรือไม่ว่าเป็นองค์ประกอบที่ปรับขนาดได้โดยผู้ใช้

หมายเหตุ:คุณสมบัติการปรับขนาดนำไปใช้กับองค์ประกอบที่มีค่าการคำนวณมากเกินเป็นสิ่งอื่นนอกเหนือจาก "มองเห็น"

นอกจากนี้ยังปรับขนาดได้รับการสนับสนุนใน Internet Explorer ในขณะนี้

นี่คือคุณสมบัติที่แตกต่างกันสำหรับการปรับขนาด:

ไม่มีการปรับขนาด:

textarea {
  resize: none;
}

ปรับขนาดทั้งสองวิธี (แนวตั้งและแนวนอน):

textarea {
  resize: both;
}

ปรับขนาดในแนวตั้ง:

textarea {
  resize: vertical;
}

ปรับขนาดแนวนอน:

textarea {
  resize: horizontal;
}

นอกจากนี้หากคุณมีwidthและheightใน CSS หรือ HTML ของคุณก็จะป้องกันไม่ให้มีการปรับขนาด textarea ของคุณด้วยการสนับสนุนเบราว์เซอร์ที่กว้างขึ้น

— Alireza
แหล่งที่มา

3

CSS 3 สามารถแก้ปัญหานี้ได้ น่าเสียดายที่ปัจจุบันรองรับเบราว์เซอร์ที่ใช้แล้ว 60%เท่านั้น

สำหรับ Internet Explorer และ iOS คุณไม่สามารถปิดการปรับขนาด แต่คุณสามารถ จำกัดtextareaมิติโดยการตั้งค่าของมันและwidthheight

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

ดูตัวอย่าง

— Oriol
แหล่งที่มา

3

คุณสามารถปิดการใช้งานคุณสมบัติtextareaเช่นนี้:

textarea {
    resize: none;
}

หากต้องการปิดใช้งานการปรับขนาดแนวตั้งหรือแนวนอนให้ใช้

resize: vertical;

หรือ

resize: horizontal;

— ปีเตอร์มอร์เทนเซ่น
แหล่งที่มา

2

ฉันสร้างตัวอย่างเล็ก ๆ เพื่อแสดงว่าคุณสมบัติการปรับขนาดทำงานอย่างไร ฉันหวังว่ามันจะช่วยคุณและคนอื่น ๆ เช่นกัน

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}

<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

ขยายตัวอย่างข้อมูล

— Ambuj คันนา
แหล่งที่มา

1

ด้วยคุณสามารถให้มันขนาดที่กำหนดเองและปิดใช้งานคุณลักษณะปรับขนาด@style(resize: none;)

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

— Carlos de Jesus Baez
แหล่งที่มา

1

สวัสดีขอบคุณสำหรับคำตอบของคุณในครั้งต่อไปโปรดจัดรูปแบบรหัส

— Baptiste Mille-Mathias

นี่คือคำตอบจาก asp.net MVC ดีมาก.

— yogihosting

0

คุณสามารถลองกับ jQuery ได้เช่นกัน

$('textarea').css("resize", "none");

— Santosh Khalse
แหล่งที่มา

3

คุณควรใช้ jQuery คุณใช้ไม่พอ :)

— Filip Savic

1

มันคือ meme - เช่น"คุณควรดร็อปและลอง jQuery" .

— ปีเตอร์มอร์เทนเซ่น

0

หากต้องการปิดใช้งานการปรับขนาดสำหรับทุกรายการtextarea:

textarea {
    resize: none;
}

หากต้องการปิดใช้งานการปรับขนาดเฉพาะเจาะจงtextareaให้เพิ่มแอททริบิวต์nameหรือidและตั้งเป็นบางอย่าง ในกรณีนี้มันมีชื่อnoresize

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}

— Abk
แหล่งที่มา

-2

การเพิ่ม!importantทำให้มันทำงาน:

width:325px !important; height:120px !important; outline:none !important;

outline เพียงเพื่อหลีกเลี่ยงโครงร่างสีน้ำเงินบนเบราว์เซอร์บางตัว

— kaelds
แหล่งที่มา

6

อย่าใช้!importantแอตทริบิวต์ที่ไม่เหมาะสม ไม่มีความหมายในการแก้ไขความกว้างและความสูงหากแอตทริบิวต์ CSS resize: noneสามารถลบคุณลักษณะการปรับขนาดได้

— Raptor

1

ไม่ใช่!importantความชั่วร้าย?

— Peter Mortensen

ใน Chrome ปัจจุบันหยุดการปรับขนาดแนวนอน แต่ฉันยังสามารถปรับขนาด textarea ในแนวตั้งได้

— Advait Junnarkar