Vue中div contenteditable 的光标定位方法
2019/6/27 7:45:43
本文主要是介绍Vue中div contenteditable 的光标定位方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框
在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后
function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari obj.focus(); //解决ff不获取焦点无法定位问题 var range = window.getSelection(); //创建range range.selectAllChildren(obj); //range 选择obj下所有子内容 range.collapseToEnd(); //光标移至最后 } else if (document.selection) { //ie10 9 8 7 6 5 var range = document.selection.createRange(); //创建选择对象 //var range = document.body.createTextRange(); range.moveToElementText(obj); //range定位到obj range.collapse(false); //光标移至最后 range.select(); } }
在实际使用时,vue.$emit是一个异步函数,最好在调用这个定位前加上一定的延迟,经测试,5ms就可以了
setTimeout(()=>{ keepLastIndex(e.target) },5)
以上这篇Vue中div contenteditable 的光标定位方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于Vue中div contenteditable 的光标定位方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Vue新手入门教程:从零开始学习Vue框架
- 2024-11-23如何集成Ant Design Vue的图标
- 2024-11-23如何集成Ant Design Vue图标
- 2024-11-23使用vue CLI快速搭建Vue项目教程
- 2024-11-23Vue CLI多环境配置简单教程
- 2024-11-23Vue3入门教程:轻松搭建你的第一个Vue3应用
- 2024-11-23Vue3+Vite快速上手指南
- 2024-11-23Vue3阿里系UI组件入门指南
- 2024-11-23Vue3的阿里系UI组件入门指南
- 2024-11-23Vue3公共组件入门教程