在可编辑的 Div 的光标位置插入文字或 HTML

最新推荐文章于 2023-05-14 15:26:13 发布

转载最新推荐文章于 2023-05-14 15:26:13 发布 · 145 阅读

文章标签：

#javascript #xhtml #ViewUI

本文提供了一个在Div元素中根据光标位置插入文本或HTML内容的示例。通过JavaScript操作DOM实现定位并插入指定内容。

示例代码如下:

<title>Div 光标位置插入文字或 HTML</title>

var pos;

function getPos()

{

pos = document.selection.createRange();

}

function fn_insertPos()

{

if(pos!=null)

{

pos.text="插入文字内容";

//pos.pasteHTML("<font color='red'>文字内容</font>");

//pos.pasteHTML("<br/>文本框控件:<input id='Text1' type='text' />");

//释放位置

pos=null;

}

else

{

alert("没有正确选择位置");

}

</script>

</head>

<body>

<div id="myDiv" style="width: 300px; height: 100px;

border: black 1px solid; font-size:small; line-height:1; "

onclick="getPos();" onkeyup="getPos();" contenteditable="true">

一二三四五六七八</div>

<input id="Button1" type="button" onclick="fn_insertPos();"

value="点击本按钮在Div中插入相关内容" />

</form>

</body>

</html>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34337265

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

获取可编辑div光标位置

yiluoAK_47的专栏

05-07

6924

要想得到那种所见及所得的网页编辑效果:即点击一下就可以编辑元素然后鼠标移到别处就算编辑完成必须用div编辑而不是表单 http://www.w3.org/1999/xhtml" > Div 光标位置插入文字或 HTML var pos; function getPos() { pos = document.selection.c

参与评论您还未登录，请先登录后发表或查看评论

关键字提示编辑器一之可编辑div获取光标位置

weixin_43069875的博客

11-22

2192

没有考虑浏览器兼容性，暂时只考虑了Chrome。效果在div中输入的时候，底下的蓝色部分（span）跟随光标变化而变化，而且内容为光标前的所有文本。红色的部分是一个|，用来模拟光标。所以只要获得|的相对像素位置，以及div的位置，就可以计算出光标的绝对像素位置。还有个前提是蓝色部分的样式要和div文字的样式相同。 div获取光标位置比较复杂，如果是textarea和input框，内部是纯文本，比较好处理。 div中输入的时候，第一行输入的内容是div的第一个文本元素。换行之后，每一行都会自动被一个d

在可编辑div中定位光标和设置光标

热门推荐

分享前端工程化、动效魔法与性能之舞！

03-03

1万+

在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。当我们去点击一个输入框的时候，就会产生一个选中对象 selection，就是我们可以看到的文字变成蓝色的那个区域，selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开.........

div可编辑，插入元素获取光标，getSelection()对象操作

m0_67108146的博客

05-14

2951

div可编辑，插入元素，获取光标位置，设置光标位置

DIV可编辑模式在光标位置插入内容

06-10

标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中，使用`contenteditable`属性将一个`<div>`元素设置为可编辑区域，允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...

JS在可编辑的div中的光标位置插入内容的方法

10-25

关于在可编辑的div中插入内容到光标位置的知识点可以详细展开为以下几点： 1. 可编辑的div（contenteditable）：HTML5新增了一个全局属性contenteditable，它可以使网页元素变得可编辑。通过将contenteditable设置...

在可编辑div中插入文字或图片解决思路与实现步骤

09-25

以下是针对“在可编辑div中插入文字或图片”的实现思路与步骤进行详细介绍。 ### 关键知识点一：使div成为可编辑区域要创建一个可编辑区域，你需要在div元素上添加一个特殊属性：`contentEditable="true"`。这样...

html div 光标位置,可编辑div光标定位问题和在指定光标处插入html代码的解决

weixin_35678674的博客

06-04

535

很难找的解决办法贡献者(http://chwjbn.blog.163.com/blog/static/1038799201310762620681/)很棒//可编辑div光标问题functionset_focus(el){el=el[0];//jquery对象转dom对象el.focus();if($.browser.msie){varrange=document.selection...

javascript在一段文字中的光标处插入其他文字

10-30

javascript在一段文字中的光标处插入其他文字

VBSCRIPT实现HTML页面控件的键盘光标位置获取和设置功能

lyserver的专栏

12-26

2494

在编写B/S程序时，有时往往需要获取或设置控件中光标的位置，以便于对控件进行进一步的子类化，可是HTML中的标准控件没有HWND，也无明显相关的属性，实现起来有点复杂，俺曾经为这个问题苦恼了好长时间，在网上搜索也得不到答案，后来经过几天的实验，才发现其实只需要基于DOM就可以实现，为了让朋友们少走弯路，故把代码贴出来，并附上一个基于此代码对INPUT 控件进行子类化的实例（实现HT

获取html中光标位置

阿飞云漫步

11-16

7384

获取html中光标的位置

html光标自动定位到文本框,html元素contenteditable属性如何定位光标和设置光标

weixin_32736623的博客

05-31

1548

最近在山寨一款网页微信的产品，对于div用contenteditable属性做的编辑框有不少心得，希望可以帮到入坑的同学。废话不多说了，我们先来理解一下HTML的光标对象是如何工作的，后面我会贴完整的DEMO代码，不用急，先去理解，才能做出更加好的输入体验。在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。当我们去点击一个输入框的时候，实际上它会产生一个选中对象-se...

可编辑DIV光标定位

weixin_30522095的博客

10-20

624

可编辑DIV光标定位为何需要光标定位当一个DIV标签添加contenteditable=“true” 的属性值的时候，就会将该标签变成一个可编辑的输入框，如果仅是输入文字，完全可以满足需求，但是当我们要插入一张图片的时候（如表情），那么这时候我们将无法知道我们将表情图片插入到哪个位置中，这时候就需要记录DIV中的光标的位置，方便下次插入。下面介绍的主要是微信网页中出现的问题：div可编辑框每...

可编辑div光标位置

01-25

4536

参考： 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/S

可编辑的div中光标位置插入对应内容（img，字符串------）

小不点的博客

11-15

2556

> html> head> meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> title>UMEDITOR 简单功能title> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

JS在可编辑的div中的光标位置插入内容或表情

06-10

要实现在可编辑的div中插入内容或表情，需要先获取光标位置，然后在该位置插入内容或表情。获取光标位置的方法可以使用window.getSelection()函数，该函数返回一个Selection对象，其中包含了光标的位置信息。通过...

在 可编辑的 Div 的 光标位置 插入 文字 或 HTML

在可编辑的 Div 的光标位置插入文字或 HTML