文章参考
http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/
http://www.w3school.com.cn/html5/att_global_contenteditable.asp
作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。
利用全浏览器都支持的 contenteditable 模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果
我们设置可以设定一个最大高度(max-height),然后设置overflow: scroll; 就可以限定高度了。
<div style="" class="border_000000 max_height_100px overflow_scroll" contenteditable="true" οnchange="getUserInput()" οnblur="blurAction()" id="contenteditableWidget" >
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="到百度首页" title="到百度首页">
<div class="color_3eb034">dsafdsaf</div>
</div>
<button οnclick="getUserInput()">
获取DIV中手动添加的内容
</button>
<script type="text/javascript">
// 获取contenteditable里面的内容,是一个HTML代码
function getUserInput(){
var contenteditableWidgetObj = document.getElementById("contenteditableWidget");
console.log(contenteditableWidgetObj.innerHTML);
// console.log("innerText" + contenteditableWidgetObj.innerText);
// console.log("textContent" + contenteditableWidgetObj.textContent);
}
// contenteditable 支持onblur事件
function blurAction(){
console.log("blurAction");
}
$(function(){
});
</script>
备注:
1、设置了 contenteditable 属性之后,并不支持onchange事件
2、我是基于chrome 浏览器做的测试,并没有测试其他浏览器(公司的产品基于chrome内核,移动终端也是)