<!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.οnlοad=function(){
//监听输入框,动态增加高度
document.querySelector('#question_title').addEventListener('input',function(){
this.style.height='auto';
this.style.height = this.scrollHeight + 'px';
});
}
</script>
</html>
textarea动态增加高度(自适应高度)简单实例
最新推荐文章于 2024-04-18 14:46:56 发布