实现文本框以及其背景(根据输入字数)动态拉伸
时间: 2023-12-07 10:04:47 浏览: 82
js实时监控文本框输入字数的实例代码
以下是一个简单的示例代码,可以实现文本框以及其背景随输入字数动态拉伸。
HTML部分:
```
<div class="container">
<textarea id="input" placeholder="输入您的文字"></textarea>
<div class="background"></div>
</div>
```
CSS部分:
```
.container {
position: relative;
width: 500px;
height: 200px;
}
#input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
font-size: 16px;
border: none;
resize: none;
background: transparent;
z-index: 1;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f2f2f2;
z-index: 0;
transition: height 0.3s ease;
}
```
JavaScript部分:
```
const input = document.getElementById('input');
const background = document.querySelector('.background');
input.addEventListener('input', function() {
const inputHeight = input.scrollHeight;
background.style.height = inputHeight + 'px';
});
```
在这个示例中,我们使用了一个textarea元素作为输入框,使用了一个div元素作为背景。我们将它们放在了一个容器元素中,并对容器元素设置了固定宽高。在CSS中,我们对输入框和背景分别设置了样式,其中背景使用了过渡效果来实现动态拉伸的效果。在JavaScript中,我们监听输入框的输入事件,并根据输入框的scrollHeight属性来动态设置背景的高度。这样,当用户输入的文字超过了输入框的高度时,背景会自动拉伸,以适应输入框的高度。
阅读全文