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

赞 (0)

相关推荐

  • vue2 如何实现div contenteditable=“true”(类似于v-model)的效果

    发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable="true" 的 div ,而在这个 div 上是使用 v-model 是没有效果的.那么问题就来了,输入是非常需要双向绑定的,这里的双向数据绑定该如何实现? 解决思路一:自定义指令 当然,说在这一段的前面,这种解决方式在 vue2 中是不行的,为什么这么说,因为现在去搜索这个问题绝大多数的搜索结果是这个,所以放在前面. 实现的原理以及

  • 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 ob

  • electron+vue实现div contenteditable截图功能

    最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能.一般通过input或textarea也能实现,通过插入[笑脸].(:12 这些标签,展示的时候解析标签就行. 如下图效果: 在网上找到的jq插件实现在textarea光标处插入表情符标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

  • 在vue中封装可复用的组件方法

    本次封装的组件以toast组件为例 以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程 先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构

  • vue中锚点的三种方法

    第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } } 组件: <template> <div> <ul class="list"> <li><a href="#1" rel="external nofollow"

  • vue 中Virtual Dom被创建的方法

    本文将通过解读render函数的源码,来分析vue中的vNode是如何创建的.在vue2.x的版本中,无论是直接书写render函数,还是使用template或el属性,或是使用.vue单文件的形式,最终都需要编译成render函数进行vnode的创建,最终再渲染成真实的DOM. 如果对vue源码的目录还不是很了解,推荐先阅读下 深入vue -- 源码目录和编译过程. 01  render函数 render方法定义在文件 src/core/instance/render.js 中 Vue.pro

  • vue中动态添加class类名的方法

    vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'

  • vue 中动态绑定class 和 style的方法代码详解

    先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

  • 在vue中使用v-bind:class的选项卡方法

    //vue中的选项卡的实现,数据驱动dom,因此需要使用数据,来改变class: 详细见代码实现 <style> ul{overflow: hidden;} ul li{float: left;width: 150px;height: 35px;line-height: 35px;border: 1px solid red;list-style: none;cursor: pointer;} ul li.active{background-color: yellow} </style&g

  • vue中使用极验验证码的方法（附demo）

    前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt

  • Vue中实现回车键切换焦点的方法

    几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中,大多都有这种操作习惯.习惯把保存成为编辑,习惯用回车替换 Tab.这是受到微软 excel 荼毒的结果. 起初我以为这个功能很简单,无非就是把 Enter 键的功能转接到 Tab 键上面,分分钟就可以解决掉的问题. 可困难马上就出现了,我发现这条路是走不通的. 我们经常可以主动触发某个事件,比如 e

随机推荐