contenteditable光标和滚动条位置
用contenteditable模拟的发送框实现发送emoji,现在有个bug就是当我多次点击表情,当光标超出当前输入框可见区域时,光标会被遮挡,contenteditable的横向滚动条也不会向后滚动,所以用户就看不见刚才的输入,请问有没有解决的办法?万分感谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
基于光标像素位置创建内容contenteditable
可编辑元素获取光标像素位置就像textarea获取光标的字符位置一样简单。
var range = window.getSelection().getRangeAt(0)
range.getBoundingClientRect() // { width, height, top, right, bottom, right }
利用getBoundingClientRect方法解决该问题
两个解决思路
从设计角度考虑,可以将内容折行显示。
如果不接受这样的设计,那就在输入时调整滚动条的位置让编辑区域始终滚动到最右侧就好了。