获取光标位置以及在光标出插入元素

最新推荐文章于 2023-05-11 17:41:31 发布
最新推荐文章于 2023-05-11 17:41:31 发布
阅读量7.2k 收藏 4
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39081974/article/details/93514373
版权

获取位置

可以参考window.getSelection()api

// 获取光标位置
let selection = window.getSelection()
let range = selection.getRangeAt(0)
range.setStart(range.endContainer, range.endOffset) // 设置开始插入位置
range.insertNode(<div>node</div>) // 插入元素，node节点
range.setEnd(range.endContainer, range.endOffset) // 设置结束位置
selection.selectAllChildren(input) //选择容器
selection.collapseToEnd() // 移动光标到最后
microcosm1994
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue项目中在可编辑div光标位置插入内容的实现代码
12-29
vue项目中在可编辑div光标位置插入内容 html： <div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} </div> <div cont
富文本框光标处插入文本 -vue wangeditor
Gomeer的博客
08-12 4496
解决此问题，发博客记录一下（happy ending~） 富文本框项目中是采用了wangeditor，具体引用可看wangeditor官方文档。 刚开始一直纠结于如何获取文本框中光标的位置，找了网上很多的例子，但在wangeditor中都不能适用。深度扒了下wangeditor文档，没找到对应方法。在官方文档搜索栏死马当活马医的搜了下“insertHTML””，还真有这个方法TAT。一行代码搞定~ html <div id='wangeditor'> <di...
获取表单中当前光标位置
06-01
获取表单元素中当前光标的位置.在插入表情等情景下会用到
vue实现点击出现操作弹出框的示例
01-21
如上图所示，这次要实现一个点击出现操作弹框的效果；并将这个功能封装成一个函数，便于在项目的多个地方使用。 具体思路是： 　　封装一个组件，组件保护一个插槽，我们可以根据不同的场景，利用插槽随意在这个弹框里插入任何元素，这个弹框显示时根据我鼠标的点击位置，定位弹窗的位置，并在组件里面监听鼠标抬起事件，触发事件时将弹窗隐藏； 接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中； 　  本次实现基于vuecli3 接下来，具体实现：      首先，我们先写一个demo组件 　  在点击出现弹出框的元素上把事件对象数据传递一下，以便获取点击时鼠标的数据，
jquery.caret:jQuery插件来操纵输入和textarea元素的插入符位置和选择范围
05-12
jQuery Caret插件 v1.5.2 跨浏览器的jQuery插件，可让您操纵<input>和<textarea>元素的光标位置和选择范围，以及突出显示页面上的文本。 浏览器兼容性 经过测试： IE6 + Chrome合金 火狐浏览器 特征 获取/设置光标位置和所选范围 在光标位置插入文本 用文字替换所选范围 处理浏览器之间的行尾差异 选择/取消选择任何元素中的所有文本 原料药 脱字号 $.fn.caret() 在单个点上询问并操纵输入字段的光标位置，而无需选择任何文本。 .caret()返回Number 获取第一个匹配元素的光标位置。 如果选择一个或多个字符，则返回所选范围的开始位置。 .caret(pos)返回jQuery对象 设置第一个匹配元素的光标位置。 pos Number ：新光标位置。 相对于输入值开头的从零开始的索引。 负数相对于输入值的结尾。 例子：
wangEditor 富文本编辑器
秦璐璐的博客帝国
05-02 2755
在vue中引入 import E from "wangeditor";正常引入 var E=window.wangEditor定义var editor = new E("#left");创建editor.create(); //当编辑器 改变时 记录其 内容！！ editor.customConfig.onchange =（） =&gt; { //处理回调函数 };想...
wangEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
Mr_Zang666的博客
04-24 1236
hello
在光标位置插入内容
TwInkle
03-31 956
const insertAtCursor =(myField, myValue) => { // myField：输入框元素, myValue: 要插入的值 if (document.selection) { // IE support myField.focus() const sel = document.selection.createRange() sel.text = myValue sel.select() } e
获取与定位光标位置
u010134224的专栏
05-11 2448
原生js提供setSelectionRange&amp;createTextRange方法来给input，textarea输入框提供设置光标位置功能具体见如下：// 获取光标位置方法 function getCursorPosition(ctrl, pos) {        var cursorPos = 0;        if (document.selection) {          ...
本地图文直接复制到wangEditor编辑器中
weixin_52041354的博客
02-09 550
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题，于是各种网上扒拉，终于找到解决方案，在这里感谢一下知乎中众大神以及TheViper。 通过知乎提供的思路找到粘贴的原理，通过TheViper找到粘贴图片的方法。 其原理为一下步骤： 监听粘贴事件；【用于插入图片】 获取光标位置；【记录图片插入位置】 获取剪切板内容；【主要是获取文件】 上传剪切板图片； 在指定光标位置插入图片。 以下是代码部分： 1.获取光标代码部分，大部分都是直接利用TheViper的代码，只是做了简单的修改，在获
编辑框光标位置插入文本
12-19
编辑框光标位置插入文本
jQuery 在光标定位的地方插入文字的插件
12-10
核心代码: 代码如下: (function($){ $.fn.extend({ “insert”:function(value){ //默认参数 value=$.extend({ “text”:”123″ },value); var dthis = $(this)[0]; //将jQuery对象转换为DOM元素 //IE下 if(document.selection){ $(dthis).focus(); //输入元素textara获取焦点 var fus = document.selection.createRange();//获取光标位置 fus.text = value.text; /
富文本编辑器 wangeditor 的使用
qq_36203432的博客
10-24 6375
vue富文本编辑器王editor使用
wangEditor编辑器使用
qq_40017621的博客
04-25 4512
. wangEditor 编辑器的使用 通过 https://github.com/wangfupeng1988/wangEditor/releases 下载wangEditor文档 引入到项目中。 通过 <script type=”text/ script ” src=”/wangEditor.js”> 引入wangEditor.js到项目中 2.创建wangEdi...
wangEditor系列之内容处理
老__L的博客
05-11 3856
内容处理
wangEditor富文本编辑器的简单使用
weixin_38673922的博客
03-19 1299
项目需求 发邮件模板，可以动态增加变量，上传图片（网络，本地） 之前查相关资料接触到CKEditor、UEeditor和wangEditor的富文本编辑器，最后选用wangEditor。不足之处wangEditor没有格式刷功能，目前项目需求还未解决格式刷问题。 一、定义富文本显示的区域 <div id="wangEditorWrap" class="toolbar"></di...
wangEditor中使得光标处于文本末端的方法记录
m0_45059466的博客
12-17 3702
wangEditor中使得光标处于文本末端的方法记录问题描述前言解决方法位置示例 问题描述 最近在使用vue写前端项目中有个需求是从父组件给wangEditor赋值后光标自动处于文本末端。 前言 wangEditor在默认情况下，父组件给其设置内容后光标会处于首端，不符合需求。网上找的直接通过js操作的方法经过尝试没有作用(也可能是没写对)，官方文档也没找到合适的方法。最终经过一番尝试后成功解决，特此记录，希望能帮到有类似需求的人。 解决方法 在父组件与wangEditor通信的双向绑定数据value的wa
wangEditor增加自定义工具栏暨百度编辑器上传WORD文档并保留源格式自动填充到编辑框
weixin_45525177的博客
09-29 644
1.获取光标代码部分，大部分都是直接利用TheViper的代码，只是做了简单的修改，在获取光标的位置添加了插件子集document对象，因为直接使用document对象获取不到光标位置。编辑器中的图片地址已经全部被替换成了服务器的图片地址，其它的用户也能够正常访问。1.从word中复制图片为rtf格式，不能被保存，并解析图片，有待解决；//设置编辑器的内容。
vue中使用Json编辑器-------jsoneditor
热门推荐
microcosm1994的博客
11-09 2万+
Install npm install jsoneditor --save Use # main.js import jsoneditor from 'jsoneditor' Vue.prototype.$jsoneditor = jsoneditor let container = document.getElementById('jsoneditor') let json = { ...
vue 获取div光标位置
最新发布
07-14
要在Vue中获取`div`元素的光标位置，可以使用`Selection`对象和`Range`对象。下面是一个示例： 首先，在Vue组件的模板中，给`div`元素添加一个`ref`属性： ```html <template> <div ref="myDiv" contenteditable="true" @mouseup="handleMouseUp"></div> </template> ``` 然后，在Vue组件的方法中，定义一个`handleMouseUp`方法来处理鼠标抬起事件。在该方法中，可以通过`window.getSelection()`获取光标的位置，并使用`Range`对象获取光标相对于`div`元素的偏移量： ```javascript <script> export default { methods: { handleMouseUp() { const selection = window.getSelection(); const range = selection.getRangeAt(0); const divOffset = this.$refs.myDiv.getBoundingClientRect(); const { top, left } = range.getBoundingClientRect(); const cursorOffset = { top: top - divOffset.top, left: left - divOffset.left }; console.log('光标位置：', cursorOffset); } } } </script> ``` 在上述示例中，当鼠标在`div`元素上抬起时，会触发`handleMouseUp`方法。该方法获取当前光标位置的`Range`对象，并计算光标相对于`div`元素的偏移量。最后，将光标位置输出到控制台。 请注意，上述示例仅适用于在鼠标抬起时获取光标位置。如果需要实时追踪光标位置的变化，可能需要在其他事件（如键盘事件、鼠标移动事件）中监听并更新光标位置。另外，还需要考虑光标在不同元素之间移动时的情况。 如果需要在特定的时机获取光标位置，可以根据具体需求调整事件和方法的绑定方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值