emoji - contenteditable光标和滚动条位置

问题描述

问 题

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

解决方案

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

这篇关于emoji - contenteditable光标和滚动条位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！