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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 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
php调整服务器时间的方法
2015/04/03 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
javascript闭包入门示例
2014/04/30 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
详解vuex的简单使用
2018/03/12 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
深入理解python对json的操作总结
2017/01/05 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python如何代码集体右移
2020/07/20 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
Linux常见面试题
2016/10/04 面试题
英文版网络工程师求职信
2013/10/28 职场文书
优秀班组申报材料
2014/12/25 职场文书
检讨书怎么写
2015/05/07 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
解析目标检测之IoU
2021/06/26 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
Python实现双向链表
2022/05/25 Python