自适应高度的 文本框 

<head>
    <title></title>
    <style type="text/css">
        .txt
        {
            border: 1px solid #CCC;
            width: 200px;
            padding: 3px;
            font: 12px/16px Simsun;
            outline: none;
            resize: none;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <textarea id="o" class="txt">自适应高度</textarea>
    <script type="text/javascript">
        (function (o, e, t) {
            //创建一个pre标签，用来计算文字应有高度
            e = document.createElement("pre");
            //给pre添加上和文本域一样的样式
            e.className = "txt";
            //设置绝对定位到屏幕外来隐藏它
            e.style.position = "absolute";
            e.style.left = "-9999px";
            //创建一个文本节点来操作，避免直接操作HTML
            e.appendChild(t = document.createTextNode(""));
            //给pre的末尾添加一个换行，因为pre会吞掉末尾的一个换行
            e.appendChild(document.createTextNode("\n"));
            //把pre放入文档中
            document.body.appendChild(e);
            //文本域键盘事件时计算高度
            o.onkeydown = o.onkeyup = function () {
                //IE8下\r\n在PRE标签中会被解析为两行，所以需要一个替换
                //如果觉得这样会影响效率可以先判断浏览器
                t.data = o.value.replace(/\r\n/g, "\n");
                o.style.height = e.offsetHeight - 8 + "px";
            };
            //初始时计算一次
            o.onkeydown();
            //为了避免换行时闪的太厉害，稍微阻止下滚动
            o.onscroll = function () { o.scrollTop = 0 };
        })(document.getElementById("o"));
    </script>
</body>

 

参考文章：http://www.web-tinker.com/search/JavaScript%20%E6%B6%88%E6%81%AF%E6%9C%BA%E5%88%B6/2.html

posted @ 2014-11-13 15:26  Coding_Yong  阅读(183)  评论(0)  编辑  收藏  举报