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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
JavaScript 常用函数库详解
Oct 21 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
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页面间参数传递的四种方法详解
2013/06/09 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
取得传值的函数
2006/10/27 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python排序方法实例分析
2015/04/30 Python
详细分析python3的reduce函数
2017/12/05 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
详解【python】str与json类型转换
2019/04/29 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
岳庙导游词
2015/02/04 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers