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

html代码片段：

<li class=" remark-text" >
   <label>备注</label>   
   <div class="text-box " contenteditable="true" id="BZ"   jschange ng-model="goods.BZ"></div>  
   <img src="images/icon_del_x.png" class="btn-del-x" id="hideIcon">
</li>

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