HTML TextArea tự động thay đổi kích thước

Tôi muốn có một vùng văn bản luôn lớn bằng văn bản trong đó. Vì vậy, trang có thể được cuộn và trong vùng văn bản không thể cuộn được.
Đây là những gì tôi đã làm cho đến nay:HTML TextArea tự động thay đổi kích thước

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, body {height: 100%;} 
textarea { 
border: none; 
width: 100%; 
height: 100%; 
-webkit-box-sizing: border-box; 
line-height: 44px; 
font-family:Helvetica; 
font-size: 17pt; 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
background-image:url('[email protected]'); 
outline: none; 
resize: none; 
} 
textarea.vert { resize:vertical; } 
</style></head><body> 
<textarea id="InputTextArea" placeholder="placeholder"></textarea> 
</body></html>

Nguồn

2013-06-24 Infinite Possibilities

thể trùng lặp của [Tạo một textarea với tính năng tự động thay đổi kích cỡ] (http: // stackoverflow .com/questions/454202/create-a-textarea-with-auto-resize) –

Tôi đã tạo một gói cho việc này nếu bạn đang sử dụng phản hồi: https://www.npmjs.com/package/react-fluid-textarea –

Thay đổi kích thước TeaxArea dựa trên số dòng nội dung. Dưới đây là một DEMO

function resizeTextarea (id) { 
    var a = document.getElementById(id); 
    a.style.height = 'auto'; 
    a.style.height = a.scrollHeight+'px'; 
} 

function init() { 
    var a = document.getElementsByTagName('textarea'); 
    for(var i=0,inb=a.length;i<inb;i++) { 
    if(a[i].getAttribute('data-resizable')=='true') 
     resizeTextarea(a[i].id); 
    } 
} 

addEventListener('DOMContentLoaded', init);

HTML

<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>

Nguồn

2013-06-24 22:14:55 shubhra

Đây là câu trả lời là ngắn gọn, nhưng kết quả cuối cùng không phải là rất trơn tru. Văn bản nhảy khá một chút trước khi khu vực đầu vào mở rộng, dẫn đến trải nghiệm người dùng ít hơn lý tưởng. Câu trả lời của Chris G. đưa ra giải pháp tốt hơn nhiều –

Nếu bạn đang sử dụng AngularJS, bạn có thể làm:

<textarea ng-keyup="ctl.handleTextAreaHeight($event)"></textarea>

Với điều này trong điều khiển của bạn:

this.handleTextAreaHeight = function (e) { 
    var element = e.target; 

    element.style.overflow = 'hidden'; 
    element.style.height = 0; 
    element.style.height = element.scrollHeight + 'px'; 
};

Nguồn

2016-01-28 11:56:38 Ellone

Sử dụng Bootstrap, Nó có thể học, trong đó bao gồm thể học mà tự động tăng chiều cao của vùng văn bản theo quy định của văn bản trong đó

Nguồn

2016-01-28 12:02:44

... và tên lớp là ...? – infografnet

–

bootstrap cung cấp kiểu dáng cho các thẻ cũng –

HTML TextArea tự động thay đổi kích thước

Trả lời

Các vấn đề liên quan