今天小编就为大家分享一篇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 的光标定位方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
Flipkart创始人向印度打车巨头Ola投资9200万美元

Flipkart创始人向印度

上月中旬曾有报道称,Flipkart联合创始人班萨尔向Ola投
解构阿里经济体(上):零售帝国商业演进的最强样板

解构阿里经济体(上):

和美国的亚马逊一样,中国的阿里巴巴是一座经营的“高峰
故宫回应夜场常态化:或结合二十四节气推出夜场活动

故宫回应夜场常态化:或

故宫博物院院长单霁翔刚刚表示:要经过本次元宵节活动进
故宫回应夜场常态化:或结合24节气推出夜场活动

故宫回应夜场常态化:或

故宫博物院院长单霁翔刚刚表示:经过评估后,或结合二十四
中国联通1月4G用户3.18亿户 固网宽带用户8150.7万户

中国联通1月4G用户3.1

移动业务方面,中国联通1月移动出账用户累计到达数3.18
比特大陆大规模裁员?回应:传闻不实 系正常人员调整

比特大陆大规模裁员?回

2月19日,有消息称,比特大陆完成了一轮大规模裁员。对此,
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图