textarea动态增加高度(自适应高度)简单实例

来源:互联网 发布:武汉淘宝图片拍摄 编辑:程序博客网 时间:2024/06/06 11:27
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">    <title></title><style>#question_title{height: 19px;overflow-Y: hidden;width:200px;}main{margin-top:20px;display: flex;justify-content: center;}</style></head><body><header></header><main><textarea placeholder="标题" rows="1" id="question_title" required></textarea></main><footer></footer></body><script>window.onload=function(){        //监听输入框,动态增加高度document.querySelector('#question_title').addEventListener('input',function(){            this.style.height='auto';            this.style.height = this.scrollHeight + 'px';        });}</script></html>

原创粉丝点击