Question

我对JS不是很好。我在一些textareas上使用这个脚本，由类成功识别 - http://www.jacklmoore.com/autosize/

对于这些textareas，我的html看起来像这样：

<textarea class="mst" id="name01" name="name01" placeholder="500 characters maximum" maxlength="500">Some text in here, up to 500 characters</textarea>

textarea的大小和外观在css中定义。在页面标题内我有这个：

<script src="./js/textarea_autosize.js"></script>

看起来像这样：

/*!
Autosize 3.0.14
license: MIT
http://www.jacklmoore.com/autosize
*/
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
    define(['exports', 'module'], factory);
} else if (typeof exports !== 'undefined' && typeof module !== 'undefined') {
    factory(exports, module);
} else {
    var mod = {
        exports: {}
    };
    factory(mod.exports, mod);
    global.autosize = mod.exports;
}
})(this, function (exports, module) {
'use strict';

var set = typeof Set === 'function' ? new Set() : (function () {
    var list = [];

    return {
        has: function has(key) {
            return Boolean(list.indexOf(key) > -1);
        },
        add: function add(key) {
            list.push(key);
        },
        'delete': function _delete(key) {
            list.splice(list.indexOf(key), 1);
        } };
})();

function assign(ta) {
    var _ref = arguments[1] === undefined ? {} : arguments[1];

    var _ref$setOverflowX = _ref.setOverflowX;
    var setOverflowX = _ref$setOverflowX === undefined ? true : _ref$setOverflowX;
    var _ref$setOverflowY = _ref.setOverflowY;
    var setOverflowY = _ref$setOverflowY === undefined ? true : _ref$setOverflowY;

    if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || set.has(ta)) return;

    var heightOffset = null;
    var overflowY = null;
    var clientWidth = ta.clientWidth;

    function init() {
        var style = window.getComputedStyle(ta, null);

        overflowY = style.overflowY;

        if (style.resize === 'vertical') {
            ta.style.resize = 'none';
        } else if (style.resize === 'both') {
            ta.style.resize = 'horizontal';
        }

        if (style.boxSizing === 'content-box') {
            heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
        } else {
            heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
        }
        // Fix when a textarea is not on document body and heightOffset is Not a Number
        if (isNaN(heightOffset)) {
            heightOffset = 0;
        }

        update();
    }

    function changeOverflow(value) {
        {
            // Chrome/Safari-specific fix:
            // When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
            // made available by removing the scrollbar. The following forces the necessary text reflow.
            var width = ta.style.width;
            ta.style.width = '0px';
            // Force reflow:
            /* jshint ignore:start */
            ta.offsetWidth;
            /* jshint ignore:end */
            ta.style.width = width;
        }

        overflowY = value;

        if (setOverflowY) {
            ta.style.overflowY = value;
        }

        resize();
    }

    function resize() {
        var htmlTop = window.pageYOffset;
        var bodyTop = document.body.scrollTop;
        var originalHeight = ta.style.height;

        ta.style.height = 'auto';

        var endHeight = ta.scrollHeight + heightOffset;

        if (ta.scrollHeight === 0) {
            // If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
            ta.style.height = originalHeight;
            return;
        }

        ta.style.height = endHeight + 'px';

        // used to check if an update is actually necessary on window.resize
        clientWidth = ta.clientWidth;

        // prevents scroll-position jumping
        document.documentElement.scrollTop = htmlTop;
        document.body.scrollTop = bodyTop;
    }

    function update() {
        var startHeight = ta.style.height;

        resize();

        var style = window.getComputedStyle(ta, null);

        if (style.height !== ta.style.height) {
            if (overflowY !== 'visible') {
                changeOverflow('visible');
            }
        } else {
            if (overflowY !== 'hidden') {
                changeOverflow('hidden');
            }
        }

        if (startHeight !== ta.style.height) {
            var evt = document.createEvent('Event');
            evt.initEvent('autosize:resized', true, false);
            ta.dispatchEvent(evt);
        }
    }

    var pageResize = function pageResize() {
        if (ta.clientWidth !== clientWidth) {
            update();
        }
    };

    var destroy = (function (style) {
        window.removeEventListener('resize', pageResize, false);
        ta.removeEventListener('input', update, false);
        ta.removeEventListener('keyup', update, false);
        ta.removeEventListener('autosize:destroy', destroy, false);
        ta.removeEventListener('autosize:update', update, false);
        set['delete'](ta);

        Object.keys(style).forEach(function (key) {
            ta.style[key] = style[key];
        });
    }).bind(ta, {
        height: ta.style.height,
        resize: ta.style.resize,
        overflowY: ta.style.overflowY,
        overflowX: ta.style.overflowX,
        wordWrap: ta.style.wordWrap });

    ta.addEventListener('autosize:destroy', destroy, false);

    // IE9 does not fire onpropertychange or oninput for deletions,
    // so binding to onkeyup to catch most of those events.
    // There is no way that I know of to detect something like 'cut' in IE9.
    if ('onpropertychange' in ta && 'oninput' in ta) {
        ta.addEventListener('keyup', update, false);
    }

    window.addEventListener('resize', pageResize, false);
    ta.addEventListener('input', update, false);
    ta.addEventListener('autosize:update', update, false);
    set.add(ta);

    if (setOverflowX) {
        ta.style.overflowX = 'hidden';
        ta.style.wordWrap = 'break-word';
    }

    init();
}

function destroy(ta) {
    if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return;
    var evt = document.createEvent('Event');
    evt.initEvent('autosize:destroy', true, false);
    ta.dispatchEvent(evt);
}

function update(ta) {
    if (!(ta && ta.nodeName && ta.nodeName === 'TEXTAREA')) return;
    var evt = document.createEvent('Event');
    evt.initEvent('autosize:update', true, false);
    ta.dispatchEvent(evt);
}

var autosize = null;

// Do nothing in Node.js environment and IE8 (or lower)
if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
    autosize = function (el) {
        return el;
    };
    autosize.destroy = function (el) {
        return el;
    };
    autosize.update = function (el) {
        return el;
    };
} else {
    autosize = function (el, options) {
        if (el) {
            Array.prototype.forEach.call(el.length ? el : [el], function (x) {
                return assign(x, options);
            });
        }
        return el;
    };
    autosize.destroy = function (el) {
        if (el) {
            Array.prototype.forEach.call(el.length ? el : [el], destroy);
        }
        return el;
    };
    autosize.update = function (el) {
        if (el) {
            Array.prototype.forEach.call(el.length ? el : [el], update);
        }
        return el;
    };
}

module.exports = autosize;
});

在页面底部我有这个：

</body>
<script type="text/javascript">
autosize(document.querySelectorAll('textarea.mst'));
</script>
</html>

当字符被输入到由class="mst"定义的textareas中时，它可以很好地工作，或者删除预加载文本中的字符。但是必须在textareas中添加或删除某些内容才能识别调整大小功能并使其生效。有没有一种简单的方法可以让10个textareas中的每一个在加载时触发，以匹配它们在加载时可能具有的内容？

请原谅我对JS的非常不理解，这可能是一个非常简单的问题。

Answer 1

您是否尝试过window.onload

window.onload = function() {
    autosize(document.querySelectorAll('textarea.mst'));
};

这将等到整个页面加载后再执行自动调整大小功能。根据你给出的内容，我不确定问题是什么，但根据我的经验，当事情没有像我期望的那样发射时，使用window.onload = function(){ /*function to execute*/ };帮助。

另一种选择可能是在每个textarea上触发更改事件。这被描述为here。

我会使用for循环：

window.onload = function() {
    var toBeResized = document.querySelectorAll('textarea.mst');

    for (var i = 0, l = toBeResized.length; i < l; i++) {
        toBeResized[i].dispatchEvent(new Event(Event.CHANGE, true));
    }
};

要尝试的第二个解决方案的来源是here和here

我希望这些方法都有所帮助。

Answer 2

我发现这个SO问题的答案也适用于我的问题。它采用了不同的方法，但达到了正确的最终结果。

Resize text area to fit all text on load jquery

现有脚本的javascript onload触发器

2 个答案: