2012-05-02

Textarea大小自适应

很久很久以前，七宝帮远在英国的肉肉同学重构一个网页，网页上有个留言的textarea。

由此她给我提了一个页面的问题：如何让一个textarea的大小根据内容来自动变大呢，类似微博那种。

当时研究了一下，原本的思路是计算单个文字大小高度，然后算有多少行然后调整高度。发现有兼容性问题，而且也比较麻烦。

昨天彻底的研究了一下，换了一个思路。因为DOM中，scrollHeight这个属性，可以取到该元素实际内容的高度，这样，就可以直接把textarea高度设置成scrollHeight就行了。方法简单了许多。最近在做模块化的东西，很想脱离jQuery的束缚，所以这次全部用DOM操作，做成了独立的一个js。

适用于主流浏览器，自测ie7/8/9,FireFox 10,Chrome 20.0.1096.1 通过。

Demo在此

以下是相关代码

autoTextarea.js:

var autoTextarea = function (elem)
{
    elem.style.resize = 'none';

    minHeight = elem.currentStyle ?
        parseFloat(elem.currentStyle['height']) : parseFloat(document.defaultView.getComputedStyle(elem, null)['height']);

    var adjust = function () {
        if (elem._length === elem.value.length) return;
        elem._length = elem.value.length;

        elem.style.height = minHeight + 'px';
        if (elem.scrollHeight > minHeight)
        {
            elem.style.overflowY = 'hidden';
            elem.style.height = elem.scrollHeight + 'px';
        }

    };

    addEvent = function (type, callback) {
        elem.addEventListener ?
            elem.addEventListener(type, callback, false) :
            elem.attachEvent('on' + type, callback);
    };

    addEvent('keydown', adjust);
    addEvent('keyup', adjust);
    addEvent('propertyadjust', adjust);
    addEvent('input', adjust);
    addEvent('focus', adjust);
    adjust();
};

autoTextarea.html:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文本框自适应</title>
    <script src="autoTextarea.js"></script>
    <style type="text/css">
        #textarea {
            width: 200px;
            height: 100px;
            overflow-y: hidden;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <h2>请在下面的输入框输入内容测试自适应</h2>
    <textarea id="textarea"></textarea>

    <script>
        var text = document.getElementById("textarea");
        autoTextarea(text);
    </script>
</body>
</html>