获取光标的位置，并在光标位置插入内容。

最新推荐文章于 2024-09-12 16:15:37 发布
最新推荐文章于 2024-09-12 16:15:37 发布
阅读量1.4w 收藏 3
点赞数
分类专栏： 前端小知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/85002918
版权
这篇博客探讨了如何在光标所在位置插入内容，主要针对input框和contenteditable的div。通过JavaScript的selectionStart和createRange等方法实现，在input中能正常工作，但遇到HTML标签时存在问题。尝试将input替换为contenteditable的div，虽然实现了输入框效果，但无法正确插入内容。文章提供了一个简单的示例和相关代码。
摘要由CSDN通过智能技术生成

 

应用场景一般都是这种编辑器的比较多。

 

 

下面的例子是这样的。

如果我先在input框里输入几个日日日，然后在中间点了一下。最后把添加的内容写在第二个框里。点击添加。

你在第二个框里输入的内容就插到你刚才点的光标的位置啦。

但是他有个问题就是如果我想输入的是个公式什么的有html标签的元素。那么他也会把标签带过去。

但是我们真正想要的样式是希望它能解析出来标签的。

我试了一下把这个input换成可以编辑的div，这样<d

最低0.47元/天 解锁文章
JavaScript 中获取光标位置
越陌度阡
03-04 8019
1.概念和原理 DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置，当选取范围起始点和结束点一样时，就是光标插入的位置。 1.1. 术语 anchor：选区起点。 focus：选区终点。 range：选区范围，包含整个节点或节点的一部分。 1.2. Selection Selection对象......
将字符串输入到光标位置
tobenext的博客
08-27 300
//使用SendInput将字符串输入到光标位置 void SendKeys(LPCWSTR pszText) { INPUT input[2]; for (int i = 0; i < wcslen(pszText); i++) { memset(input, 0, 2 * sizeof(INPUT)); input[0].type = INPUT_KEYBOARD; input[0].ki.wVk = 0; input[0].ki.wScan = pszText[i];
Javascript 获取光标位置
07-03
NULL 博文链接：https://langiriss.iteye.com/blog/680930
在JavaScript中实现在光标位置插入内容的方法
最新发布
weixin_36073714的博客
09-12 1399
本文还有配套的精品资源，点击获取 简介：在网页开发中，使用JavaScript在文本输入框或富文本编辑器的光标位置插入内容是常见的功能需求。这要求对DOM操作和文本选区有深入理解。通过获取光标位置并使用Range对象，开发者可以插入文本并更新光标位置。本文将介绍实现此功能所需的关键知识，包括创建文本节点、操作Selection对象、使用Range对象的方法，并且会探讨在特定...
Windows mobile上获取输入光标位置
小李匪盗的专栏
06-02 5130
 用户在输入过程中，光标的位置在不停变化，如何得到这个位置来进行一些操作呢？似乎很简单，GetCaretPos，这个函数能得到光标的位置。看看MSDN上如何说的：GetCaretPosSee AlsoSetCaretPos | POINT | Carets Functions RequirementsOS Versions: Windows CE 1.0 and l
react/antd实现textarea获取光标位置在光标处插入文字
热门推荐
a2469025185的博客
08-30 1万+
react/antd实现textarea获取光标位置在光标处插入文字 1.首先将textarea对象通过refs存起来 <TextArea ref={(input) => this.contentProps = input} placeholder="请输入" style={{ width:'600px' }} autos...
vue-ueditor-wrap 中获取光标所在的位置，插入文本内容
weixin_38822843的博客
09-12 1196
vue-ueditor-wrap 中获取光标所在的位置，插入文本内容
react获取鼠标位置_javascript,es6,react获取textarea的光标位置并插入内容
weixin_39735012的博客
12-19 820
/*javascript 原生写法*//**向指定的dom，的光标位置插入str字符串**/function insertText(obj,str) {if (document.selection) {var sel = document.selection.createRange();sel.text = str;} else if (typeof obj.selectionStart === ...
JQuery在光标位置插入内容的实现代码
10-29
本文将详细解释如何使用JQuery在光标位置插入内容，并展示实现代码。 首先，我们了解不同浏览器处理光标位置和插入内容的方式。在Internet Explorer（IE）浏览器中，可以使用`document.selection`对象和`...
jquery实现在光标位置插入内容的方法
10-24
在本篇文档中，我们主要讨论了使用jQuery实现光标位置插入内容的方法，该方法涉及到了jQuery功能的扩展技巧，对于需要在Web页面上实现这一功能的开发者来说具有一定的参考价值。 首先，文中提到了jQuery本身的一些...
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
10-27
在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的操作时，主要涉及两个关键属性：`selectionStart`和`selectionEnd`，以及在IE中使用的`document.selection`对象。 `selectionStart`和`selectionEnd`是...
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
本文将详细介绍如何在Vue中实现在可编辑div的光标位置插入内容，并提供相关代码示例。 首先，我们需要一个可编辑的div元素，通过设置`contenteditable="true"`属性来使其变为可编辑。以下是一个简单的HTML结构： `...
vue获取textarea的光标位置.js
08-13
vue通过当前的光标来进行插值，从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理，从而达到对新字符的插入
reactnative在文本框光标处插入文字的实现方法
一生为追梦的博客
10-14 1343
效果展示： 注意：如果使用了scroll滚动插件，需要使用keyboardShouldPersistTaps="always"方法防止键盘阻止按钮被触发，上篇文章有介绍： https://blog.csdn.net/ywl570717586/article/details/102505241 render中的简略代码： render () { const listItems = t...
html div 光标位置,可编辑div光标定位问题和在指定光标处插入html代码的解决
weixin_35678674的博客
06-04 494
很难找的解决办法贡献者(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...
获取输入框光标位置，插入内容到光标位置
lxm1353723767的博客
07-25 1540
该方法使用方式： iptId=需要插入内容的输入框节点id textClass=要插入的内容节点class； 举例： <html> <input id="input" type="text" value="12345" /> <a class="msg">插入该内容</a> </html> <script> $(function(){ //假如输入框当前光标聚焦到了3和4之间,那么我点击a标签之后， a标签的内容就会插入到输入
点击按钮，在input框在光标位置插入文字，系列问题待解决
Yoyo_Yan的博客
03-01 2697
想制作一个公式设计器，需要在文字的对应位置插入按钮对应的文字，效果如下： 遇到的问题： 1. 如何获取光标位置，并在对应位置插入内容 两种情况： （1）用户点击位置后，在光标位置插入内容 （2）用户选中几个字之后点击按钮进行文字替换 解决： selectionStart和selectionEnd可以获取到当前元素光标的起始位置。 //对应光标位置插入文字 insert(val) ...
react hooks默认光标位置
m0_61035392的博客
11-08 607
react hooks默认光标位置，react hooks根据选项决定光标位置，react hooks动态选择光标位置
【记录】Android Studio 光标 insert 问题
cake_cafe的专栏
03-31 612
问题描述：在打开Android studio 代码编辑时，光标默认变成插入状态 解决之路： 1.File->Setting->Edit->General->Appearance 取消 Use block caret选中状态 但我的编辑器并没有选中该项 2.若安装ideaVim插件，则光标会默认变成插入状态，卸载该插件即可。 ...
C++实现文档光标位置控制教程
- 为了确保光标位置正确更新，需要在处理WM_PAINT消息时绘制光标，并在处理键盘输入事件（如WM_KEYDOWN）时根据输入内容移动光标位置。 4. 文本的输入和显示: - 文本输入通常涉及到WM_CHAR消息的处理，每当用户按...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值