contenteditable光标和滚动条位置

发布于 2022-09-05 03:06:42 字数 262 浏览 23 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

我家小可爱 2022-09-12 03:06:42

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

七颜 2022-09-12 03:06:42

两个解决思路

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

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文