如何获取焦点（css的focus伪类选择器）

点击表单输入框，输入框向右边拉长

input {
      width: 200px;
      transition: all .3s;
}

/* focus伪类选择器  获得焦点 */
input:focus {
      width: 300px;
}
<input type="text">

如何获取输入评论的字数

输入框获得焦点，字数显示；输入框失去焦点，字数隐藏

<span class="total">0/200字</span>
// 1. 当我们文本域获得了焦点，就让 total 显示出来
tx.addEventListener('focus', function () {
total.style.opacity = 1
})
// 2. 当我们文本域失去了焦点，就让 total 隐藏出来
tx.addEventListener('blur', function () {
total.style.opacity = 0
// 3. 检测用户输入
tx.addEventListener('input', function () {
// console.log(tx.value.length)  得到输入的长度
total.innerHTML = `${tx.value.length}/200字`
})
})

按下回车发布评论：key()

只有按下回车键Enter键才会触发

const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
// 只有按下的是回车键，才会触发
if (e.key === 'Enter') {
    console.log('我按下了回车键')
}
}

用户输入评论为空的解决方法

去除字符串左右空格

const str = '    pink'
console.log(str.trim());//去除字符串左右空格
//输出为pink

按下回车键，如何解决评论还存在在输入文本框中

按下回车，结束，清空文本域。字符统计复原归0

 // 等我们按下回车，结束，清空文本域
tx.value = ''
//按下回车后 把字符统计复原
total.innerHTML = ''