textarea随着文字高度自动改变

Html

Css

// JavaScript Document

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
        // 设置高度为0以防需要收缩（高度）
        el.style.height = 0;
        // set the correct height
        // el.scrollHeight is the full height of the content, not just the visible part
        // 设置正确的高度
        // el.scrollHeight 是文本内容的全部高度，而不仅仅是可见部分的。
        el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
    }

// we use the "data-adaptheight" attribute as a marker
    // 我们使用"data-adaptheight"属性作为一个标记
    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
        // 如果文本域有边距，我们需要设置box-sizing: border-box
        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
        // 通过"rows"属性初始化的最小高度
        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);
    }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

textarea随着文字高度自动改变



代码描述：textarea随着文字高度自动改变

2

最新

发表评论全部评论

暂时没有评论！

八月不到底0

2018/1/6 14:33:26

好厉害呀小哥哥
回复

WckY0

2017/12/11 10:36:26

666 和这网站的官网评论如出一辙给力
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

蟑螂

相关代码

textarea随着文字高度自动改变

最新