div模拟textarea实现高度自适应

样式模拟仿照 div模拟textarea以实现高度自适应 » 张鑫旭-鑫空间-鑫生活 的例子

html代码片段:

  • css样式:

    .text-box {
         width: 68%;
         padding: 13px 3% 10px 0;
         line-height: 20px;
         min-height: 45px;
         max-height: 90px;
         border: 0;
         text-align: right;
         outline: none;
         box-sizing: border-box;
         background: white;
         font-size: 1.4rem;
         word-wrap: break-word;
         overflow-x: hidden;
         overflow-y: auto;
        -webkit-user-modify: read-write-plaintext-only;
    }
    

    入坑:

    1、 获取textarea的值不能使用val() 需使用 text() 获取
    2、div模拟textarea ng 中对表单元素的ng-focus ng-blur 不能使用

    下面实现div模拟textare带消除按钮的输入框 js代码

    //删除按钮-备注项    
      $(document).ready(function(){
        $(".remark-text .text-box").bind('input',function(e){
             var val=$(".remark-text .text-box").text();
                   if(val==undefinded||val==""){  
                     $(".remark-text img").hide();
                   }else{
                     $(".remark-text img").show();
                  }
        });
        $(".remark-text .text-box").blur(function(e){ 
            $(".remark-text img").hide();
        });
        $(".remark-text .text-box").focus(function(e){    
               var val=$(".remark-text .text-box").text(); 
               if(val==undefined||val==""){      
                      $(".remark-text img").hide(); 
                }else{ 
                     $(".remark-text img").show();
               }
         });
        var handler=function(){   document.getElementById('BZ').innerText="";   this.style.display="none";}
        document.getElementById('hideIcon').addEventListener('tap',handler,false)
    });
    

    注意在移动端 由于click事件存在300ms的延迟会导致 blur 事件存在问题 本文件一引入的mui插件 ,所以直接之间监听使用 tap 事件

    移动端 一般加入 zepto.js

    你可能感兴趣的:(div模拟textarea实现高度自适应)