Có cách nào để làm cho một vùng văn bản kéo dài để phù hợp với nội dung của nó mà không cần sử dụng PHP hoặc JavaScript không?

95

Tôi đang điền vào một vùng văn bản với nội dung để người dùng chỉnh sửa.

Có thể làm cho nó kéo dài để phù hợp với nội dung với CSS (như overflow:showđối với div) không?

html css

— ý nghĩa
nguồn

1

Không có ai có câu trả lời là không có bất kỳ lỗi nào không sử dụng khuôn khổ? :-(

— starbeamrainbowlabs

Tôi chỉ đơn giản sử dụng css max-width: 100% và nó tự động vừa với một hộp. Bất kỳ vấn đề với điều đó?

— yashas123

42

Không hẳn vậy. Điều này thường được thực hiện bằng cách sử dụng javascript.

có một cuộc thảo luận tốt về cách thực hiện điều này ở đây ...

Tự động kích thước văn bản bằng Prototype

— Rik Heywood
nguồn

211

một dòng duy nhất

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

— Martin Prestone
nguồn

8

Làm thế nào để điều này chỉ có hai phiếu bầu. Đây là điều không thể tin được Martin. Tôi chỉ dành 30 phút để giải quyết vấn đề này. Công việc tuyệt vời.

— Philip Duffney

30

Điều đó thật tuyệt. Tôi chỉ muốn thêm thay đổi đó this.scrollHeight + "px"để this.scrollHeight + 3 + "px"làm cho vùng văn bản đủ lớn để nó không hiển thị thanh cuộn.

— maarten

Vấn đề: Khi người dùng viết đủ để cuộn xuống, nó sẽ đặt lại vị trí cuộn mỗi khi họ thêm dòng mới bằng Enter.

— Costa

5

Tôi biết đây là một câu hỏi cũ, nhưng tôi có một vùng văn bản trên một trang chỉnh sửa và nó đã có một giá trị khi trang tải, làm cách nào để tôi có thể mở rộng nó để vừa với nội dung?

— Arootin Aghazaryan

1

@ArootinAghazaryan - Bạn có thể đã tìm ra giải pháp, nhưng đối với bất kỳ ai khác: Chỉ cần tạo một hàm với mã thay đổi kích thước thay vì đặt nó nội tuyến trong HTML. Sau đó, bạn có thể gọi hàm tương tự khi tải trang.

— Magnus Eriksson

6

Đây là một hàm hoạt động với jQuery (chỉ dành cho chiều cao, không phải chiều rộng):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

Lưu ý: op đã yêu cầu một giải pháp không sử dụng Javascript, tuy nhiên điều này sẽ hữu ích cho nhiều người gặp câu hỏi này.

— Chris Dutrow
nguồn

5

Đây là một giải pháp rất đơn giản, nhưng nó phù hợp với tôi:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>

Mở rộng đoạn mã

— NicB
nguồn

2

Chiều cao của hộp tăng lên theo mỗi hành trình phím, không chỉ các dòng mới. Ngay cả backspace và delete cũng khiến chiều cao tăng lên. Hãy khắc phục và bạn sẽ nhận lại được phiếu ủng hộ.

— Birrel

một số trình duyệt như IE không tính toán chiều cao cuộn một cách chính xác, điều này có thể gây ra những loại vấn đề đó. đừng bận tâm rằng nhân xảy ra cho tôi trong Chrome cũng ...

— KthProg

1

đây là giải pháp (chỉnh sửa hàng đợi là đầy đủ):

<style>   textarea {     resize: none;     overflow: auto;   } </style>  <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea>  <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){     this.style.height = '1px';     this.style.height = this.scrollHeight + 'px'; } </script>

về cơ bản bạn phải thiết lập chiều cao để 1px đầu tiên, vì điều này: stackoverflow.com/questions/10722058/...

— KthProg

3

Một giải pháp đơn giản khác để kiểm soát vùng văn bản động.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>

Mở rộng đoạn mã

— Krutika Patel
nguồn