共计 4381 个字符，预计需要花费 11 分钟才能阅读完成。
一、需求
1、用户输入内容，输入框右下角实时显示输入字数
2、为避免用户输入时在内容左右两端误按多余的空格，在发送评论时，检测用户输入的内容左右两端是否带有空格，若有空格，发布时自动取消左右两端的空格
3、若用户发布的内容为空，则自动取消该条评论的发送，并弹出提示框：请勿发送空白评论！
4、当页面中已经填装多条评论时，发送的新评论自动追加到最末尾
5、发布的评论最下方显示发布时间
二、代码素材
以下是缺失 JS 部分的代码，感兴趣的小伙伴可以先自己试着写一写
评论回车发布
0/200 字
三、完整代码
因为今天这个案例的算法思路实在不方便直接用语言描述，所以我就直接放代码了
不过我在代码上添加了详细的注释，大家结合代码和注释一定能够理解的
评论回车发布
0/200 字
`
// 清空用户输入的内容
tx.value = ”
total.innerHTML = `${tx.value.length}/200 字 `
// 将用户输入的内容追加到评论区里
list.append(div)
}
// 鼠标点击发布，调用发布函数
button.addEventListener(‘click’, () => {
fabu()
})
// 键盘按下 Enter，调用发布函数
tx.addEventListener(‘keyup’, e => {
if (e.key === ‘Enter’) fabu()
})
// 输入框获得焦点，右下角自动显示字数
tx.addEventListener(‘focus’, function () {
total.style.opacity = 1
})
// 输入框失去焦点，右下角字数显示自动消失
tx.addEventListener(‘blur’, function () {
total.style.opacity = 0
})
// 用户输入时，实时显示输入字数
tx.addEventListener(‘input’, () => {
total.innerHTML = `${tx.value.length}/200 字 `
})
原文地址: HTML CSS JavaScript：实现 B 站评论发布效果
