zoukankan      html  css  js  c++  java
  • 监听textarea输入文本变化,让textarea高度自增长

    原本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; 
            } 
        } 
    } 

     js监听的写法

    document.getElementById("txtContent").addEventListener("input", ResizeTextarea, false);
  • 相关阅读:
    python set()、len()、type()、保留小数、EOFError
    代码学习与感悟
    你的代码的风格
    python 面向对象的类
    ubuntu 上下左右键变成ABCD
    python运算符
    python 数据类型详解
    python关键字
    python 设计及调试的一些小技巧
    python-list
  • 原文地址:https://www.cnblogs.com/snowbaby-kang/p/4887400.html
Copyright © 2011-2022 走看看