Vue中div contenteditable 的光标定位方法
作者:CloudJay_喵喵喵 发布时间:2024-05-28 15:58:17
标签: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)
来源:https://blog.csdn.net/qq_31061615/article/details/80263746
0
投稿
猜你喜欢
- 简单实现平面的点K均值分析,使用欧几里得距离,并用pylab展示。import pylab as pl#calc Euclid squire
- 本文实例讲述了Python求解平方根的方法。分享给大家供大家参考。具体如下:主要通过SICP的内容改写而来。基于newton method求
- 下面两个函数实现了对字符串中数字的判断。function isnaw(str) f
- 一、简介urllib.request.urlopen()函数用于实现对目标url的访问。函数原型如下:urllib.request.urlo
- 关于多线程的大概讲解:在Python的标准库中给出了2个模块:_thread和threading,_thread是低级模块不支持守护线程,当
- 比如要访问b站在a站设置一个cookies,则可以这样做: 1.在b.com下建立一个文件cookies.htm 内容为: 代码如下:内容摘
- 目录多线程(连接池)操作MySQL插入数据1.主要模块2.创建连接池3.数据预处理4.线程任务5.启动多线程6.完整示例7.思考/总结多线程
- 一,集群搭建步骤1.先在一台虚拟机配置jdk,hadoop2.克隆3.修改网络等相关配置当我们使用虚拟机时,可能自然而然的会想上面的步骤一样
- 1.视图的概述 视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中的相关数据。视图将一个查询的结果作为一个表来使用,因此视图可
- 常用分支首先分享一下我们的分支规范,然后再介绍摸索出的打tag的规范。mastermaster : 主分支 , 最终在master分支对外发
- 阅读上一篇:微软建议的ASP性能优化28条守则(4)技巧 13:避免重新确定数组的维数 应尽量避免 Redim 数组。就性能而言,如果计算机
- 问题背景:有一批需要处理的文件,对于每一个文件,都需要调用同一个函数进行处理,相当耗时。有没有加速的办法呢?当然有啦,比如说你将这些文件分成
- 代码如下:CREATE FUNCTION dbo.f_splitstr( @str varchar(8000) )RETURNS
- 文章出处:https://blog.csdn.net/sdksdk0/article/details/80933444作者:朱培
- 获取带有中文参数的url内容对于中文的参数如果不进行编码的话,python的urllib2直接处理会报错,我们可以先将中文转换成utf- 8
- 用到的 Pygame 函数贪吃蛇小游戏用到的函数 功能描述init()初始化 pygamedisplay.set_mode()以元
- 本文实例讲述了Python中shape计算矩阵的方法。分享给大家供大家参考,具体如下:看到机器学习算法时,注意到了shape计算矩阵的方法接
- 将数据存储在不同的数据结构中时,搜索是非常基本的必需条件。最简单的方法是遍历数据结构中的每个元素,并将其与您正在搜索的值进行匹配。这就是所谓
- Django在执行python manage.py makemigrations的时候一切正常但是执行python manage.py mi
- meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:<head> <meta&nbs