要求:在textArea中输入内容后,随着输入内容的行树的增加或减少,输入框的高度随之改变,让使用者可以看到输入的所有内容:
以下代码基于网上的查询,亲测,可以实现:
<form id="formId">
<div style="margin-bottom:8px;margin-top:8px;" class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8">
<textarea type='text' class='form-control' name='cell_0' rows="1" style="overflow: hidden"></textarea>
</div>
<div style="margin-bottom:8px;margin-top:8px;" class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8">
<textarea type='text' class='form-control' name='cell_1' rows="1" style="overflow: hidden"></textarea>
</div>
<div style="margin-bottom:8px;margin-top:8px;" class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8">
<textarea type='text' class='form-control' name='cell_2' rows="1" style="overflow: hidden"></textarea>
</div>
</form>
$(function () {
var obj = document.getElementsByTagName("textarea");//获取页面中的所有textarea
for(var i =0;i<obj.length;i++){
//遍历textarea,对每个输入框的高度进行自适应调整
makeExpandingArea(obj.item(i));
}
});
/**
* 设置输入框textarea的高度随输入内容多少而自动变更
* @param el html元素
*/
function makeExpandingArea(el) {
var timer = null;
//由于ie8有溢出堆栈问题,故调整了这里
var setStyle = function(el, auto) {
if (auto) el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
}
var delayedResize = function(el) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function() {
setStyle(el)
}, 200);
}
if (el.addEventListener) {
el.addEventListener('input', function() {
setStyle(el, 1);
}, false);
setStyle(el)
} else if (el.attachEvent) {
el.attachEvent('onpropertychange', function() {
setStyle(el)
})
setStyle(el)
}
if (window.VBArray && window.addEventListener) { //IE9
el.attachEvent("onkeydown", function() {
var key = window.event.keyCode;
if (key == 8 || key == 46) delayedResize(el);
});
el.attachEvent("oncut", function() {
delayedResize(el);
}); //处理粘贴
}
}