三行代码解决vue中设置div contenteditable光标移动到最后

初辰ge

于 2022-07-28 12:40:15 发布

阅读量2.3k

点赞数 4

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/chuenst/article/details/126032432

版权

vue 专栏收录该内容

28 篇文章

订阅专栏

在Vue项目开发过程中，遇到使用contenteditable属性的div作为文本输入框时，非手动输入后光标会丢失。通过引入以下代码，可以有效定位光标到输入框末尾：this.$refs.editDiv.focus(); document.execCommand('selectAll', false, null); document.getSelection().collapseToEnd(); 这段代码对于修复contenteditable元素的光标定位问题非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框
在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后

this.$refs.editDiv.focus()
document.execCommand('selectAll', false, null);
document.getSelection().collapseToEnd();

三行代码 解决vue中设置div contenteditable光标移动到最后

三行代码解决vue中设置div contenteditable光标移动到最后