zoukankan      html  css  js  c++  java
  • 自适应高度的 文本框

    <head>
        <title></title>
        <style type="text/css">
            .txt
            {
                border: 1px solid #CCC;
                 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("
    "));
                //把pre放入文档中
                document.body.appendChild(e);
                //文本域键盘事件时计算高度
                o.onkeydown = o.onkeyup = function () {
                    //IE8下
    在PRE标签中会被解析为两行,所以需要一个替换
                    //如果觉得这样会影响效率可以先判断浏览器
                    t.data = o.value.replace(/
    /g, "
    ");
                    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

  • 相关阅读:
    centos ftp搭建
    python_模块
    python_如何建立包
    python_类
    python_递归
    python_函数
    python_字典
    python_条件、循环语句
    python_中文乱码问题
    Viola–Jones object detection framework--Rapid Object Detection using a Boosted Cascade of Simple Features中文翻译 及 matlab实现(见文末链接)
  • 原文地址:https://www.cnblogs.com/sunzhenyong/p/4095080.html
Copyright © 2011-2022 走看看