可编辑div光标位置

最新推荐文章于 2023-05-14 15:26:13 发布
最新推荐文章于 2023-05-14 15:26:13 发布
阅读量4.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyujia6636/article/details/54728719
版权

参考：

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt

https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

MDN上提示这些API不稳定。应该是兼容IE9+，谷歌，火狐

1. var sel = window.getSelection()  变量sel是当前页面被选中区域

2. var objRange = sel.getRangeAt(0) 获得选中区域的range对象

   startOffset和endOffset代表了选中区域的起始位置和结束位置，相同时代表了光标位置

  anchorNode有2个值，一个是输入框节点，一个是文本text。

  anch

最低0.47元/天 解锁文章
山外人家
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html div 光标位置,JS在可编辑的div中的光标位置插入内容的方法
weixin_31295867的博客
06-04 695
本文实例讲述了js实现在可编辑div中指定位置插入内容的方法，就像我们使用的编辑器一样，分享给大家供大家参考。具体实现方法如下：首先要让DIV启用编辑模式通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。不扯话题了。下面说怎么获取或设置光标位置.2个步骤：① 获取DIV中的光标位置② 改变光标位置var cursor = 0; // 光标...
DIV可编辑模式在光标位置插入内容
06-10
NULL 博文链接：https://canlynet.iteye.com/blog/2340751
在可编辑div中定位光标和设置光标
越陌度阡
03-03 9240
在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。 当我们去点击一个输入框的时候，就会产生一个选中对象 selection，就是我们可以看到的文字变成蓝色的那个区域，selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开.........
可编辑DIV光标定位
weixin_30522095的博客
10-20 514
可编辑DIV光标定位 为何需要光标定位 当一个DIV标签添加contenteditable=“true” 的属性值的时候，就会将该标签变成一个可编辑的输入框，如果仅是输入文字，完全可以满足需求，但是当我们要插入一张图片的时候（如表情），那么这时候我们将无法知道我们将表情图片插入到哪个位置中，这时候就需要记录DIV中的光标的位置，方便下次插入。 下面介绍的主要是微信网页中出现的问题：div可编辑框每...
可编辑的DIV（兼容IE8）以及插入内容到光标位置
canlynetsky的博客
12-19 2111
在做web版聊天程序时，往往需要将一个DIV设置为可编辑状态，并且可以插入表情。 插入表情时，不仅仅是在输入的文字最后追加表情，还可能在输入文本的中间，即光标位置插入表情（光标后还有文本）。 另外，还需要保证粘贴进来的文字必须是纯文本，不然百度搜索一篇文章粘贴进来，就太乱了。我们希望输入的文本都是纯文本，只有最基本的p标签或div标签。 通过各种百度搜索，我在项目中成功实施。 现将项目中的技
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 ...
JS在可编辑的div中的光标位置插入内容的方法
10-25
主要介绍了JS在可编辑的div中的光标位置插入内容的方法,分别用js与jQuery两种方式加以实现,是非常实用的特效技巧,需要的朋友可以参考下
可编辑DIV 光标位置 处理
weixin_30815427的博客
08-06 198
//场景： 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情，那么textarea就不能满足需求了，因为textarea内没有办法加入image// 采用方案是使用可编辑的DIV（也就是 一般 DIV的 contenteditable 属性为 true）// 但是发现添加表情或者插入图片之后，光标不会随着移动到末尾 图片和表情 采用的 append方式 添加的htm...
关键字提示编辑器一之可编辑div获取光标位置
weixin_43069875的博客
11-22 1903
没有考虑浏览器兼容性，暂时只考虑了Chrome。 效果 在div中输入的时候，底下的蓝色部分（span）跟随光标变化而变化，而且内容为光标前的所有文本。 红色的部分是一个|，用来模拟光标。所以只要获得|的相对像素位置，以及div的位置，就可以计算出光标的绝对像素位置。还有个前提是蓝色部分的样式要和div文字的样式相同。 div获取光标位置比较复杂，如果是textarea和input框，内部是纯文本，比较好处理。 div中输入的时候，第一行输入的内容是div的第一个文本元素。换行之后，每一行都会自动被一个d
div可编辑，插入元素获取光标，getSelection()对象操作
m0_67108146的博客
05-14 2194
div可编辑，插入元素，获取光标位置，设置光标位置
div光标
weixin_30312557的博客
11-12 70
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
可编辑div中如何在光标位置添加内容
技术之家 www.5ceo.cn
11-09 561
原文：https://www.5ceo.cn/wyl/blogs/detail/1000131.html
INPUT、TEXTAREA以及DIV中控制光标的位置
reedseutozte的专栏
07-24 4261
设置以及获取光标位置在Textarea和Input中如下获得光标函数可以兼容IE以及FireFox,对于可编辑DIV,如下代码仅仅IE下也可以正常运行. IE分支:函数中的Sel变量是整个文档的可选区域,所以需要做一个循环,使得Sel区域中的文本中的最后一段文本和文本框中的文本做到最长匹配,其偏移量为光标的位置function getCaretPos(element) { var CaretPos = 0; // IE Support if (document.se
html div 光标位置,ContentEditable div-在更新内部html之后设置光标位置
weixin_42512723的博客
06-04 359
// some mock logic to identify spelling errorconst errorWords = ["helloo", "dudeee"];// Find words from string like ' Helloo world .. '// Perhaps you could find a better library you that does this...
div contenteditable 的光标定位（仿input的maxlength）
jeremygeng的博客
02-24 1711
div contenteditable 的光标定位（仿input的maxlength） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
js中对可编辑的div进行光标位置插入内容，和移动光标到最后
hhy1006894859的博客
05-07 6526
直接上代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...
[代码片段] 如何在contenteditable的div中设置和获取光标位置？
GBin1中文互联
08-15 3855
如果需要在contenteditable的div中获取当前光标的位置，可以尝试如下代码：  function createRange(node, chars, range) { if (!range) { range = document.createRange() range.selectNode(node); range.se...
可编辑div：处理光标插入加手写
qq_40184218的博客
07-28 289
html： // contenteditable： 可编辑属性，true or false // ref： 定位dom <div contenteditable="true" class="card-content" ref="cardAreaRef" placeholder="请输入或在右侧选择"></div> js： 选中右侧或底部 // link：想添加的标签，啥都行 // (this.$refs.cardAreaRef as any).focus()： 定位光标位置 ch.
html div 光标位置,可编辑div光标定位问题和在指定光标处插入html代码的解决
最新发布
06-06
对于可编辑的div元素，你可以使用selection和range对象来定位光标位置，并在指定光标处插入html代码。 以下是一个示例代码： ``` // 获取可编辑div元素 var editableDiv = document.getElementById("editable"); // 获取选区对象 var selection = window.getSelection(); // 创建range对象 var range = document.createRange(); // 将range对象定位到可编辑div元素的末尾 range.setStart(editableDiv, editableDiv.childNodes.length); range.collapse(true); // 将选区对象设为创建的range对象 selection.removeAllRanges(); selection.addRange(range); // 在当前光标位置插入html代码 var html = "<p>要插入的html代码</p>"; var fragment = range.createContextualFragment(html); range.insertNode(fragment); ``` 请注意，上述代码中的`editable`应替换为你的可编辑div元素的id。同时，你可以根据需要调整range对象的起始位置，以定位光标的位置。 希望这可以帮助你解决问题！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值