zoukankan      html  css  js  c++  java
  • html文本域textarea高度自增、自动换行

    文本域自动换行、高度自增,采用以下方式:

    html:

    <textarea rows="1" class="answerTextArea" maxlength="60"></textarea>
    

    css:

    .answerTextArea{
        width: 100%;
        height: auto;
        border:none;
        outline: none;
        font-size: 0.6rem;
        color:#fff;
        background: none;
        box-sizing: border-box;
        padding: 0.4rem 0;
        border-bottom: 1px solid #fff;
    }

    js实现功能:

    //监听文本域输入,高度自动变化
    function makeExpandingArea(el) {
       var timer = null;
       //由于ie8有溢出堆栈问题,故调整了这里
       var setStyle = function(el, auto) {
           if (auto) el.style.height = 'auto';
           el.style.height = el.scrollHeight + 'px';
       }
       var delayedResize = function(el) {
           if (timer) {
               clearTimeout(timer);
               timer = null;
           }
           timer = setTimeout(function() {
               setStyle(el)
           }, 200);
       }
       if (el.addEventListener) {
           el.addEventListener('input', function() {
               setStyle(el, 1);
           }, false);
           setStyle(el)
       } else if (el.attachEvent) {
           el.attachEvent('onpropertychange', function() {
               setStyle(el)
           })
           setStyle(el)
       }
       if (window.VBArray && window.addEventListener) { //IE9
           el.attachEvent("onkeydown", function() {
               var key = window.event.keyCode;
               if (key == 8 || key == 46) delayedResize(el);
    
           });
           el.attachEvent("oncut", function() {
               delayedResize(el);
           }); //处理粘贴
       }
    }
    
    //监听文本换行
    function exeTextLine(obj){
        if(obj == ""){
            var textareaList = document.getElementsByClassName('answerTextArea');
            
            for(var i=0;i<textareaList.length;i++){
                makeExpandingArea(textareaList[i]);
            }
        }else{
            makeExpandingArea(obj);
        }
        
    }
    
    exeTextLine("");

    效果如下:

  • 相关阅读:
    【剑指Offer】21、栈的压入、弹出序列
    【剑指Offer】20、包含min函数的栈
    【剑指Offer】19、顺时针打印矩阵
    【Shell编程】Shell基本语法
    【Shell编程】Shell程序设计
    linux 大中括号变量解读
    Python 二进制,十进制,十六进制转换
    Python3.x和Python2.x的区别
    python通过SSH登陆linux并操作
    PEP8特性
  • 原文地址:https://www.cnblogs.com/nanyang520/p/11230765.html
Copyright © 2011-2022 走看看