做后台编辑器,可伸缩下性的输入框,在H5出了contenteditable之后,基本上取代了textarea,在做个根据内容自动适应高度是,尝试过多种方法,最后选择了contenteditable。
css代码:
.textarea{
width: 400px;
min-height: 20px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
line-height: 24px;
padding: 2px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
html代码:
<div class="textarea" contenteditable="true"><br /></div>
注意 contenteditable必须为true.
利用ajax传值
$.ajax({
url:'demo/test',
type:'post',
dataType:'json',
contentType:"application/x-www-form-urlencoded; charset=utf-8",
data:{"textarea":textarea},
success:function(data){
var result = data.result;
if(data.code.index == 0){
alert($(".textarea").html());
}
})
事件什么的就不贴了,就一个点击事件