可编辑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
版权
本文介绍了在可编辑div中实现光标定位的技术，包括使用Window的getSelection API获取选区，通过getRangeAt获取range对象，以及如何利用startOffset和endOffset确定光标位置。还提到在不同浏览器中的兼容性，如兼容IE9+，谷歌和火狐。当div失去焦点时保存range对象，重新聚焦时使用removeAllRanges和addRange恢复之前的状态。
摘要由CSDN通过智能技术生成

参考：

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元/天 解锁文章
山外人家
关注
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
以上就是在Vue项目中实现可编辑div光标位置插入内容的基本步骤。需要注意的是，由于浏览器之间的兼容性问题，可能需要对不同的浏览器进行适配。同时，为了提高用户体验，还可以考虑添加更多的交互细节，比如拖动元素...
在可编辑div中定位光标和设置光标
越陌度阡
03-03 9481
在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。 当我们去点击一个输入框的时候，就会产生一个选中对象 selection，就是我们可以看到的文字变成蓝色的那个区域，selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开.........
div可编辑，插入元素获取光标，getSelection()对象操作
m0_67108146的博客
05-14 2375
div可编辑，插入元素，获取光标位置，设置光标位置
js中对可编辑的div进行光标位置插入内容，和移动光标到最后
hhy1006894859的博客
05-07 6696
直接上代码： <!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 3892
如果需要在contenteditable的div中获取当前光标的位置，可以尝试如下代码：  function createRange(node, chars, range) { if (!range) { range = document.createRange() range.selectNode(node); range.se...
div contenteditable 的光标定位（仿input的maxlength）
jeremygeng的博客
02-24 1744
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中的光标位置插入内容的方法
10-25
关于在可编辑的div中插入内容到光标位置的知识点可以详细展开为以下几点： 1. 可编辑的div（contenteditable）：HTML5新增了一个全局属性contenteditable，它可以使网页元素变得可编辑。通过将contenteditable设置...
DIV可编辑模式在光标位置插入内容
06-10
标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中，使用`contenteditable`属性将一个`<div>`元素设置为可编辑区域，允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...
可编辑DIV光标定位
weixin_30522095的博客
10-20 553
可编辑DIV光标定位 为何需要光标定位 当一个DIV标签添加contenteditable=“true” 的属性值的时候，就会将该标签变成一个可编辑的输入框，如果仅是输入文字，完全可以满足需求，但是当我们要插入一张图片的时候（如表情），那么这时候我们将无法知道我们将表情图片插入到哪个位置中，这时候就需要记录DIV中的光标的位置，方便下次插入。 下面介绍的主要是微信网页中出现的问题：div可编辑框每...
INPUT、TEXTAREA以及DIV中控制光标的位置
reedseutozte的专栏
07-24 4272
设置以及获取光标位置在Textarea和Input中如下获得光标函数可以兼容IE以及FireFox,对于可编辑DIV,如下代码仅仅IE下也可以正常运行. IE分支:函数中的Sel变量是整个文档的可选区域,所以需要做一个循环,使得Sel区域中的文本中的最后一段文本和文本框中的文本做到最长匹配,其偏移量为光标的位置function getCaretPos(element) { var CaretPos = 0; // IE Support if (document.se
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
BlackJunffg的博客
11-24 4084
文章原创作者：codingWeb 链接：https://blog.csdn.net/fesfsefgs/article/details/109540259 这周碰到一个东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现
js实现可编辑的div，并在光标处插入元素
weixin_44817017的博客
03-30 7089
js实现可编辑的div，并在光标处插入元素 定义一个可以编辑的div，用户可以输入内容，并根据需要在光标处插入HTML元素或文本内容。 并且实现placeholder的效果 文章目录js实现可编辑的div，并在光标处插入元素一、可编辑的div 和 placeholder效果二、在光标位置插入元素1. 获取div输入的内容2.在光标位置插入按钮 一、可编辑的div 和 placeholder效果 关键点：contenteditable属性 标签的contenteditable属性可以设置元素内容是否
关键字提示编辑器一之可编辑div获取光标位置
weixin_43069875的博客
11-22 1984
没有考虑浏览器兼容性，暂时只考虑了Chrome。 效果 在div中输入的时候，底下的蓝色部分（span）跟随光标变化而变化，而且内容为光标前的所有文本。 红色的部分是一个|，用来模拟光标。所以只要获得|的相对像素位置，以及div的位置，就可以计算出光标的绝对像素位置。还有个前提是蓝色部分的样式要和div文字的样式相同。 div获取光标位置比较复杂，如果是textarea和input框，内部是纯文本，比较好处理。 div中输入的时候，第一行输入的内容是div的第一个文本元素。换行之后，每一行都会自动被一个d
html div 光标位置,JS在可编辑的div中的光标位置插入内容的方法
weixin_31295867的博客
06-04 729
本文实例讲述了js实现在可编辑div中指定位置插入内容的方法，就像我们使用的编辑器一样，分享给大家供大家参考。具体实现方法如下：首先要让DIV启用编辑模式通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。不扯话题了。下面说怎么获取或设置光标位置.2个步骤：① 获取DIV中的光标位置② 改变光标位置var cursor = 0; // 光标...
模拟输入框光标
小漠007的专栏
02-15 3436
这个问题其实百度一下一堆答案。 可是为啥我这里还是写一遍呢？ 百度到的都只是说用css动画模拟光标闪动 光标闪动只是贯标的一部分功能 还缺少和鼠标的交互 还有光标应该是占位的同时是脱离文档的（不影响其他兄弟节点的布局） CSS动画 百度到的css 闪动动画 @keyframes cursor-blinks { 0% { opacity: 1; display: block;
div高仿出来input,拉起高仿的数字键盘？
weixin_34346099的博客
05-24 500
大家都知道，H5的input框，唤醒手机的键盘在android和ios上展现的不同。需求要求实现我们这边实现一个自己的键盘，无奈需求方还是大佬，搬砖者还是乖乖的想想实现(笔者这边采用的react框架，所以采用了antd mobile组件库) 首先要实现一个键盘，大家的思路是怎么样的呢？ 用li循环呗，9键出来。 用div模拟input + 光标。 第一个很是简单，用组件库的Modal里面嵌套我...
前端 - 用div仿输入框，解决鼠标点击位置错乱的问题
kelly0721的博客
01-25 882
用div仿输入框，解决鼠标点击位置错乱的问题
input、textarea、div(contenteditable=true)光标定位到最后
weixin_33964094的博客
03-19 702
1、针对input、textarea //定位input、textarea function po_Last(obj) { obj.focus();//解决ff不获取焦点无法定位问题 if (window.getSelection) {//ie11 10 9 ff safari var m...
html div 光标位置,可编辑div光标定位问题和在指定光标处插入html代码的解决
最新发布
06-06
// 获取可编辑div元素 var editableDiv = document.getElementById("editable"); // 获取选区对象 var selection = window.getSelection(); // 创建range对象 var range = document.createRange(); // 将range...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值