最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js让textarea高度随输入自适应
时间:2016-07-08 编辑:简简单单 来源:一聚教程网
最近项目应要求,需要让textarea高度随输入自适应,那么走起吧!
html
textarea {
min-
overflow: hidden;
}
JS
/**
* 让textarea高度随输入自适应
* @param {[[Type]]} selector 选择器
* @param {[[Type]]} callback
*/
var bindTextChange = function (selector, callback) {
var $selector = $(selector);
var _IE = (function() {
var v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '',
all[0]
);
return v > 4 ? v : false;
})();
if (_IE && _IE < 9) {
$selector.on('propertychange', function() {
window.event.propertyName === 'value' && callback.call(this);
});
} else {
$selector.on('input', callback);
if (_IE === 9) {
var callbackWrapper = function() {
callback.call($selector[0]);
}
$selector.on('focus', function() {
document.addEventListener('selectionchange', callbackWrapper);
}).on('blur', function() {
document.removeEventListener('selectionchange', callbackWrapper);
});
}
}
}
var $textarea = $('textarea');
var paddingTop = parseFloat($textarea.css('padding-top'));
var paddingBottom = parseFloat($textarea.css('padding-bottom'));
var minmin-height'));
bindTextChange('textarea', function() {
$(this).height(minHeight).height(this.scrollHeight - paddingTop - paddingBottom);
});
相关文章
- iframe自适应内容高度js代码 07-26
- js实现文本框根据输入内容自适应高度 09-23
- js中iframe载入后高度自适应 12-28
- js 文本框高度自适应 10-02
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31