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("");

    效果如下:

  • 相关阅读:
    页面跳转
    vue项目流程
    前端框架发展史
    webpack构建react项目和发布流程
    React工作原理
    React项目中的registerServiceWorker作用?
    学习react总结
    浏览器的渲染:过程与原理
    浮动相关
    块级元素与内嵌元素
  • 原文地址:https://www.cnblogs.com/nanyang520/p/11230765.html
Copyright © 2011-2022 走看看