div模拟textarea实现高度自适应 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 事件 【div模拟textarea实现高度自适应】移动端一般加入 zepto.js