首页 > 其他 > 详细

文本域的高度自适应

时间:2016-07-12 19:23:46      阅读:146      评论:0      收藏:0      [点我收藏+]

<textarea maxlength="100" class="text" data-adaptheight rows="3" cols="40" placeholder="Your input"
style="padding: 16px; line-height: 1.5;"></textarea>
<script>
(function () {
function adjustHeight(el, minHeight) {
var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
var diff = outerHeight - el.clientHeight;
el.style.height = 0;
el.style.height = Math.max(minHeight, el.scrollHeight + diff) + ‘px‘;
}
var textAreas1 = document.getElementsByClassName(‘text‘);
for(var i = 0; i< textAreas1.length; i++) {
foo([textAreas1[i]]);
}
function foo(textAreas){
for (var i = 0, l = textAreas.length; i < l; i++) {
var el = textAreas[i];
el.style.boxSizing = el.style.mozBoxSizing = ‘border-box‘;
el.style.overflowY = ‘hidden‘;
var minHeight = el.scrollHeight;
el.addEventListener(‘input‘, function () {
adjustHeight(el, minHeight);
});
window.addEventListener(‘resize‘, function () {
adjustHeight(el, minHeight);
});
adjustHeight(el, minHeight);
}};
}());
</script>

文本域的高度自适应

原文:http://www.cnblogs.com/dream0530/p/5664426.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!