码迷,mamicode.com
首页 > 其他好文 > 详细

文本输入框自适应高度

时间:2017-06-23 22:10:31      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:body   最大   onkeyup   bre   txt   textarea   one   article   自适应   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <HTML>

    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <TITLE>文本框textarea高度自适应增长/伸缩</TITLE>
    </HEAD>

    <BODY>
        <textarea id="txtContent1" rows="5" cols="50" onkeyup="ResizeTextarea(1)" style="overflow-y:hidden;resize: none;">Textarea高度随内容自适应地增长,无滚动栏
        </textarea>
        <script type="text/javascript">
             // 最小高度
            var minRows = 5;
             // 最大高度。超过则出现滚动栏
            var maxRows = 60;

            function ResizeTextarea(index) {
                var t = document.getElementById(‘txtContent‘ + index);
                if (t.scrollTop == 0) t.scrollTop = 1;
                while (t.scrollTop == 0) {
                    if (t.rows > minRows)
                        t.rows--;
                    else
                        break;
                    t.scrollTop = 1;
                    if (t.rows < maxRows)
                        t.style.overflowY = "hidden";
                    if (t.scrollTop > 0) {
                        t.rows++;
                        break;
                    }
                }
                while (t.scrollTop > 0) {
                    if (t.rows < maxRows) {
                        t.rows++;
                        if (t.scrollTop == 0) t.scrollTop = 1;
                    } else {
                        t.style.overflowY = "auto";
                        break;
                    }
                }
            }
        </script>
    </BODY>

    </HTML>

自增前:

技术分享


自增后:

技术分享

文本输入框自适应高度

标签:body   最大   onkeyup   bre   txt   textarea   one   article   自适应   

原文地址:http://www.cnblogs.com/yfceshi/p/7071649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!