contenteditable光标和滚动条位置

Question

用contenteditable模拟的发送框实现发送emoji，现在有个bug就是当我多次点击表情，当光标超出当前输入框可见区域时，光标会被遮挡，contenteditable的横向滚动条也不会向后滚动，所以用户就看不见刚才的输入，请问有没有解决的办法？万分感谢！

Answer 1

基于光标像素位置创建内容contenteditable
可编辑元素获取光标像素位置就像textarea获取光标的字符位置一样简单。
var range = window.getSelection().getRangeAt(0)
range.getBoundingClientRect() // { width, height, top, right, bottom, right }
利用getBoundingClientRect方法解决该问题

Answer 2

两个解决思路

从设计角度考虑，可以将内容折行显示。

如果不接受这样的设计，那就在输入时调整滚动条的位置让编辑区域始终滚动到最右侧就好了。