- 实现原理:
- 利用H5提供的元素可编辑属性 contentEditable 使普通的html元素具有和输入框一样的编辑功能
- 其他实现方式:
- 使用textarea作为输入框
- 准备一个与textarea等宽的pre元素,用于计算内容高度,需要设置css {word-break:break-all} 否则可能不会自动换行
- 输入的同时将value写入pre,然后获取pre的scrollHeight,将其赋给textare的height,以此实现textarea随内容自动调整大小
- emoji输入:由于无法在textarea内直接渲染图片,普遍的做法是使用[^-^]这种格式的字符代替emoji,在使用富文本时通过正则匹配[^-^],替换成对应的emoji图片进行渲染
- 缺陷
- 需要直接操作dom
- 依赖h5新属性
- 使用场景
- 即时通讯
- 留言、评论
- $ npm i 安装运行所需依赖
- $ npm start 运行项目 默认在3000端口