工作中遇到的js小技巧

原创 827538259 随笔 js 246阅读 2018-01-10 18:54:11 举报

// 仿微信聊天输入框 textarea实现高度自适应 内容超出时不会隐藏
<script>
if (obj.scrollTop == 0) obj.scrollTop = 1;
while (obj.scrollTop == 0) {
if (obj.rows > minRows)
obj.rows--;
else
break;
obj.scrollTop = 1;
if (obj.rows < maxRows)
obj.style.overflowY = "hidden";
if (obj.scrollTop > 0) {
obj.rows++;
break;
}
}
while(obj.scrollTop>0){
if(obj.rows<maxRows){
obj.rows++;
if(obj.scrollTop==0){
obj.scrollTop=1;
}
}else{
obj.style.overflowY = 'auto';
break;
}
}
</script>

//div模拟textarea文本域轻松实现高度自适应
<div class="test_box" contenteditable="true"> </div>
.test_box {
width: 400px;
min-height: 20px;
/设置最小高度/
max-height: 1000px;
/设置最大高度超过300px时出现滚动条/
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 13px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 16px;
line-height: 24px;
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);
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复