Vue中div contenteditable 的光标定位方法


Posted in Javascript onAugust 25, 2018

在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 的光标定位方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
浅析Jquery操作select
Dec 13 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 #Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 #Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 #Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 #Javascript
对vue 键盘回车事件的实例讲解
Aug 25 #Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 #Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 #Javascript
You might like
FleaPHP的安全设置方法
2008/09/15 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
js分页代码分享
2014/04/28 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python如何快速实现分布式任务
2017/07/06 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
大学生个人实习的自我评价
2014/02/15 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
个人收入证明范本
2015/06/12 职场文书