html+css+JS实现点击输入框完成以下要求:①输入框呈现可输入文字的状态,占位符依然提示“有什么新鲜事想分享给大家?”②当输入框中输入了文字内容时,输入框右下角显示输入文字的个数,并且发送按钮呈现可点击的状态代码
时间: 2023-06-08 16:04:32 浏览: 89
以下是实现你要求的 HTML、CSS 和 JavaScript 代码:
HTML 代码:
```
<div class="input-box">
<textarea placeholder="有什么新鲜事想分享给大家?"></textarea>
<div class="counter">0/140</div>
<button disabled>发送</button>
</div>
```
CSS 代码:
```
.input-box {
position: relative;
}
textarea {
width: 100%;
height: 80px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 4px;
resize: none;
}
.counter {
position: absolute;
bottom: 5px;
right: 10px;
font-size: 12px;
color: #999;
}
button {
position: absolute;
bottom: 5px;
right: 70px;
padding: 8px 16px;
font-size: 16px;
color: #fff;
background-color: #f60;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #f90;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
```
JavaScript 代码:
```
var textarea = document.querySelector('.input-box textarea');
var counter = document.querySelector('.input-box .counter');
var button = document.querySelector('.input-box button');
textarea.addEventListener('input', function() {
var length = textarea.value.length;
counter.textContent = length + '/140';
if (length > 0 && length <= 140) {
button.disabled = false;
} else {
button.disabled = true;
}
});
```
注意事项:
1. 以上代码只是实现了你的第一个问题,后面如果有其他的问题,请重新提出。
2. 以上代码中的数字“140”是限制输入文字的最大数量,你可以根据需求调整这个数字。
3. 以上代码中的发送按钮需要依赖后端实现,因此此处只是提供一个可点击的状态,请根据实际情况修改。
4. 如果需要实现更好的用户体验,可以添加一些动效,例如输入框获取焦点时占位符上移、发送按钮变换颜色等等。
阅读全文