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

监听textarea输入文本变化,让textarea高度自增长

时间:2015-10-17 14:38:51      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

原本textarea只有一行高,随着输入字数的增多,默认增长,通常会用在移动端产品输入上

使用oninput比onkeyup更适合手机端

<textarea id="txtContent" class="j_comment_in comment-input" rows="1" oninput="ResizeTextarea(‘txtContent‘)" style="overflow-y:hidden;" placeholder="我也说一句..."></textarea> 
//最小高度 
var minRows = 1; 
// 最大高度,超过则出现滚动条 
var maxRows = 6; 
function ResizeTextarea(id){ 
    var t = document.getElementById(id); 
    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; 
        } 
    } 
} 

 

监听textarea输入文本变化,让textarea高度自增长

标签:

原文地址:http://www.cnblogs.com/snowbaby-kang/p/4887400.html

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