vue 点击div 获取位置_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 的光标定位方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
本文标题: Vue中div contenteditable 的光标定位方法
本文地址: http://www.cppcns.com/wangluo/javascript/238095.html
vue 点击div 获取位置_Vue中div contenteditable 的光标定位方法相关推荐
- vue 点击div 获取位置_Vue中组件之间8种通信方式,值得收藏
之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么 ...
- vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能 方式一:js实现全屏 全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
- vue 点击div 获取位置_vue接入腾讯位置服务之点击事件
1.[调用展示] //先在vue的index.html里面引入腾讯地图包 //.vue export default{ mounted() { this.init(); }, methods:{ in ...
- vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
- vue点击改变data值_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...
- vue使用百度地图获取位置信息
vue使用百度地图获取位置信息 最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
- vue 点击弹出文字_vue实现点击出现操作弹出框的示例
如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里 ...
- vue试按钮失去焦点_Vue中实现回车键切换焦点的方法
几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中, ...
- html中如何写div中div的位置,position设置div的位置
css怎么调整div的位置 可以使用css中的position来对div进行定位来改变div的位置,position可能的值如下: 工具原料:编辑器.浏览器 通过设置一个div的position的值来 ...
- vue改变class名字_vue中动态添加class类名的方法
vue 动态添加class类名,灵活得让你发狂,下面示例几个 动态添加类名 文字的颜色) 文字的颜色) 三元表示式(文字的颜色) 文字的颜色) 文字的颜色) 通过方法设置class类名 export ...
最新文章
- zigbee 万能遥控器 裸机发送和协议栈发送
- php 空格用什么表示方法,php用空格代替标点符号
- java motherfree video_Java Config 下的Spring Test方式
- java zip 文件夹_Java Zip文件文件夹示例
- 求ucinet软件下载资源!!!!
- android 指南针图片,如何在android中制作自定义指南针视图
- Macbook实用技巧——小白入门必须会的
- 姿态估计之2D人体姿态估计 - CPN(Cascaded Pyramid Network for Multi-Person Pose Estimation)
- 关于地理数据收集与处理的基本工具推荐(2)---10m精度的全球土地覆盖数据下载
- 【手写 Vue2.x 源码】第十八篇 - 根据 render 函数,生成 vnode
- Spring框架的简介
- 初学者学习app2sd并且成功使用它的全过程
- TFS:TF30042数据库已满 the database is full. contact you team foundation server administrator
- 育碧Web实习笔试题分享
- 工欲善其事必先利其器——第四弹	业务线仿真回归流程剖析
- 控制工程基础应掌握的重要知识点
- 福彩3D-JAVA继承
- 懂得这些,不再惧怕Android权限请求
- 七年级计算机系统课程表,计算机专业课程表
- Excel-给文本框赋值/写入公式
热门文章
- Codeforces Round #387 (Div. 2) 747E
- 博客园模板--博客园老牛大讲堂
- 学习Wireshark之二:数据包分析
- 如何将pdf转换成word文档,文件格式转换器选择
- 安装SharePoint2010的准备工作-2
- 2009年北京第一场雪
- 使用QtXlsx读写Excel文件
- java根据url下载文件
- java连接hive类找不着_JDBC 连接 hive2 遇到的java.lang.ClassNotFoundException: org.apache.hive.jdbc.HiveDriver...
- python版本回退_版本回退