需求如下

如图 这是一个评论框

要求获得光标后 会出现显示字数区域 并且这里的字数会随着用户输入字数变化而变化 按下回车后用户就可以发布评论

这个第一部分显示字数区域和我们上次的案例类似 不过这里用的是opacity(不透明度) 不再赘述

字数长度怎么获取?

用文本事件input 表单输入触发 通过tx.value获取输入内容 tx.value.length获取字数长度 最后将文字个数渲染到页面中

怎么按Enter后响应 发布评论?

先给输入框对象增添一个键盘监听事件(用’keyup’更适合)

然后通过e返回的事件对象调用e.key判断按下键是否为Enter 若是Enter则将评论区显示 并且内容为输入框里用户输入的内容

这里调用了字符串方法trim()消除字符串两边空格 防止用户输入空内容以及不小心打了空格这种情况

评论发布后把评论框再置为空 并将显示字数改为0 就基本完成了

需求基本实现就是这样 主要运用了键盘事件和事件对象event的相关内容 e.key YYDS!

See You!