Vue中div contenteditable 的光标定位方法
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框
在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后
functionkeepLastIndex(obj){
console.log(obj)
console.log(window.getSelection)
console.log(document.selection)
if(window.getSelection){//ie11109ffsafari
obj.focus();//解决ff不获取焦点无法定位问题
varrange=window.getSelection();//创建range
range.selectAllChildren(obj);//range选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}elseif(document.selection){//ie1098765
varrange=document.selection.createRange();//创建选择对象
//varrange=document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
在实际使用时,vue.$emit是一个异步函数,最好在调用这个定位前加上一定的延迟,经测试,5ms就可以了
setTimeout(()=>{
keepLastIndex(e.target)
},5)
以上这篇Vue中divcontenteditable的光标定位方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。