HTML TextArea otomatik olarak yeniden boyutlandır

İçindeki metin kadar büyük bir metin alanına sahip olmak isterim. Böylece sayfa kaydırılabilir ve metin alanında kaydırılamaz.
İşte şimdiye kadar yaptık:HTML TextArea otomatik olarak yeniden boyutlandır

<!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>

kaynak

2013-06-24 Infinite Possibilities

[otomatik yeniden boyutlandırma ile bir textarea oluşturma] olası yinelenen (http metne göre metin alanının yüksekliğini artırmak classess dahil classess var .com/questions/454202/create-a-textarea-with-auto-resize) –

Tepki kullanıyorsanız, bunun için bir paket oluşturdum: https://www.npmjs.com/package/react-fluid-textarea –

içerik hat sayısına bağlı yeniden boyutlandırma TeaxArea. Burda bu 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>

kaynak

2013-06-24 22:14:55 shubhra

Bu cevap özlü, ama sonuç çok düzgün değil. Metin, giriş alanının genişlemesinden önce biraz daha zıplar ve ideal kullanıcı deneyiminden daha azına yol açar. Chris G.'nin cevabı daha iyi bir çözüm veriyor –

Eğer angularjs kullanıyorsanız, bunu yapabilirsiniz: Bununla

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

controller içerisinde:

// stackoverflow:

kaynak

2016-01-28 11:56:38 Ellone

Kullanım Bootstrap, otomatik o

kaynak

2016-01-28 12:02:44

... ve sınıf isimleri ...? – infografnet

–

bootstrap ayrıca şu etiketlere de stil verir: –

HTML TextArea otomatik olarak yeniden boyutlandır

cevap

İlgili konular