根据文本域(Textarea)内容自动调整高度
html
部分
<textarea data-adaptheight rows="3" cols="40" placeholder="Your input"
style="padding: 16px; line-height: 1.5;"></textarea>
- js部分
(function() {
function adjustHeight(textareaElement, minHeight) {
// compute the height difference which is caused by border and outline
var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
var diff = outerHeight - el.clientHeight;
// set the height to 0 in case of it has to be shrinked
el.style.height = 0;
// set the correct height
// el.scrollHeight is the full height of the content, not just the visible part
el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
}
// we use the "data-adaptheight" attribute as a marker
var textAreas = document.querySelectorAll('textarea[data-adaptheight]');
// iterate through all the textareas on the page
for (var i = 0, l = textAreas.length; i < l; i++) {
var el = textAreas[i];
// we need box-sizing: border-box, if the textarea has padding
el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
// we don't need any scrollbars, do we? :)
el.style.overflowY = 'hidden';
// the minimum height initiated through the "rows" attribute
var minHeight = el.scrollHeight;
el.addEventListener('input', function() {
adjustHeight(el, minHeight);
});
// we have to readjust when window size changes (e.g. orientation change)
window.addEventListener('resize', function() {
adjustHeight(el, minHeight);
});
// we adjust height to the initial content
adjustHeight(el, minHeight);
}
}());
示例:http://jsfiddle.net/5h4fauq8/1/
原文:http://web.jobbole.com/81906/