textarea高度自适应-&&-元素属性contentedit
2020-09-21 本文已影响0人
dingFY
近期实现的一个笔录页面如上图所示，考虑到笔录内容肯定会超出一行，所以我选择了使用textareas文本输入框，问题在于textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。
下面分享2种实现textarea高度自适应的做法，一种是利用JS控制textarea的高度，另一种是用div元素来模拟textarea
一、textarea高度自适应
一个有最小高度（设置其rows属性或min-height）的 textarea 标签，当文字增多出现滚动条时，将它的滚动高度scrollHeight赋给height，以达到textarea高度自适应效果
【1】原生JS
<body>
<textarea name="" id="record" cols="60" rows="2"></textarea>
<script>
document.querySelector('#record').addEventListener('input', function () {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
})
</script>
</body>
【2】JQuery
<body>
<textarea name="" id="record" cols="60" rows="2"></textarea>
<script>
$('#record').on('input', function () {
$(this).css('height', 'auto').css('height', this.scrollHeight + 'px');
});
</script>
</body>
【3】Vue
<body>
<textarea cols="60" rows="2" v-model="recode" @input="handleInput"></textarea>
<script>
export default {
data() {
return {
recode: ''
}
},
methods: {
handleInput(e) {
e.target.style.height = 'auto';
e.target.style.height = e.target.scrollHeight + 'px';
}
},
}
</script>
</body>
二、contenteditable介绍
contenteditable是HTML5新增的全局属性，有true和false两个属性值。用来指定元素内容是否可编辑。
下面是一个简单的示例，创建一个"contenteditable"属性为"true"的div元素，用户就可以编辑其内容了。div元素超出指定width会自动换行，因此不用设置高度自适应
<div contenteditable="true">
用户可以在此编辑文本
</div>
文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
