Manually change the width of textarea,some bugs
wytong123 opened this issue · 3 comments
wytong123 commented
Manually change the width of textarea, “updata” height changed, and then manually reduce the width, even if the overflow, height has not changed
$ele.find("textarea").each(function() { autosize(this); this.addEventListener('focus', function() { console.log('abc'); autosize.update(this); }); }).on('autosize:resized', function() { console.log('textarea height updated'); });
wytong123 commented
@jackmoore What do I need to do ?Thank you for any help
wytong123 commented
Another point, textarea focus when manually reduce the width
hehanli101 commented
Do you know how to solve this problem? Thank you for any help
textarea is not resize
<title>Simple Autosize for textareas</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } div { position:absolute; top: 20px; left: 40px; width: 800px; max-height: 600px; overflow: auto; } textarea { /* width: calc(100% - 20px); */ width: 100%; max-width: 900px; min-width: 100px; } </style>
<textarea disabled rows="2" cols="19">The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaicform of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.而反觀如果噶榮榮榮榮榮榮榮榮榮榮個人説的都是日日日</textarea>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>
autosize(document.querySelectorAll('textarea'));
setTimeout(function(){
$('#root').append($('<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li>
</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li>
</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li>
</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li>
</li><li></li><li></li><li></li><li></li><li></li><li></li>'))
}, 1000);
</script>