js 在鼠标指定位置插入指定文本

最新推荐文章于 2024-09-12 16:15:37 发布
最新推荐文章于 2024-09-12 16:15:37 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： Js、xml、div+css 文章标签： xhtml html insert button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lhypang2006/article/details/4506811
版权
这篇博客介绍了如何使用JavaScript在XHTML文本域中，根据鼠标位置插入指定文本。通过示例代码展示了在不同浏览器环境下（包括IE和Mozilla/NetScrape）实现该功能的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JS在文本域鼠标指定位置插入文本</title>
</head>
<body>
<script>


 function insertAtCursor(myField, myValue) { 
     //IE support 
     if (document.selection) { 
         myField.focus(); 
         sel = document.selection.createRange(); 
         sel.text = myValue; 
         sel.select(); 
     } 
     //MOZILLA/NETSCAPE support 
     else if (myField.selectionStart || myField.selectionStart == '0') { 
         var startPos = myField.selectionStart; 
         var

最低0.47元/天 解锁文章
在多行文本输入框光标指定位置插入内容并改变光标位置
qq_51053759的博客
10-28 535
在多行文本输入框光标指定位置插入内容并改变光标位置
JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版
10-29
该方法可以在指定的索引位置插入行，索引从0开始。如果未指定索引，它将插入在表格的最后。该方法会返回新插入行的引用，这是一个DOM元素。 3. `insertCell()`方法 `insertCell()`方法用于在表格行（row）中插入新...
JavaScript中在光标处插入添加文本标签节点的详细方法
10-20
本文主要介绍了JavaScript中在光标处插入添加文本标签节点的详细方法。具有很好的参考价值。下面跟着小编一起来看下吧
转：JS在文本域鼠标指定位置插入文本-柯乐义
weixin_30449239的博客
08-24 114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> &lt...
javascript 在光标处插入指定内容
04-19
javascript 在光标处插入指定内容
JS获取鼠标光标位置并在光标位置添加内容
About_zero的博客
06-28 4629
JS获取鼠标光标位置并插入内容
在JavaScript中实现在光标位置插入内容的方法
weixin_36073714的博客
09-12 1908
本文还有配套的精品资源，点击获取 简介：在网页开发中，使用JavaScript在文本输入框或富文本编辑器的光标位置插入内容是常见的功能需求。这要求对DOM操作和文本选区有深入理解。通过获取光标位置并使用Range对象，开发者可以插入文本并更新光标位置。本文将介绍实现此功能所需的关键知识，包括创建文本节点、操作Selection对象、使用Range对象的方法，并且会探讨在特定...
jQuery往textarea中光标所在位置插入文本的方法
10-24
本文主要介绍如何使用jQuery在textarea元素中光标所在位置插入文本的技术，涉及到的操作和概念包括jQuery库的使用、文本框（textarea）的光标定位与操作、JavaScript中的字符串操作等。文章首先定义了jQuery的扩展...
在光标位置后面添加内容
Salunone的博客
09-02 411
function pasteHtmlAtCaret(html) { var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); r
js 光标处插入文字
weixin_41859887的博客
03-03 1516
//在光标处插入文字 //obj获取标签ID //str要插入的字符 function insertText(obj, str) { if(document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if(typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number')
JS在textarea光标处插入文本
Erikz的专栏
02-10 1097
JS在文本域鼠标指定位置插入文本-柯乐义 function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select
jQuery 输入框 在光标位置插入内容, 并选中
weixin_34015336的博客
10-26 527
// //使用方法 //$(文本域选择器).insertContent("插入的内容"); //$(文本域选择器).insertContent("插入的内容"，数值); //根据数值选中插入文本内容两边的边界, 数值: 0是表示插入文字全部选择，-1表示插入文字两边各少选中一个字符。 // //在光标位置插入内容, 并选中 (function($) { $.fn.extend...
JS实现在文本指定位置插入内容
Bazainga的博客
12-16 6445
function insertAtCursor(myField, myValue) {       //IE 浏览器    if (document.selection) {        myField.focus();        sel = document.selection.createRange();        sel.text = myValue;        
菜鸟学JS——JS在文本域光标位置插入文本
热门推荐
纸上得来终觉浅，绝知此事要躬行
09-30 1万+
很久没有写关于JS的博客了，说实话，对于JS小弟仅限于会简单使用的程度。作为一个非前端人员，个人觉得更好更深入的掌握JS还是很有必要的。这不仅仅可以提高自身价值，更重要的是很多情况下使用JS可以更好的解决问题，带来更好的用户体验。扯得稍微远了一些，回归正题，今天跟大家分享一个很实用的小实例——在光标处插入文本。   JS代码：   function insertAtCursor(myF...
获取鼠标位置插入字符串
qq_28468549的博客
10-16 672
 str 指的是插入的字符串 id为textarea    function setStr(str,id){         var tc = $(id);         var tclen = tc.val().length;         tc.focus();         if(typeof document.selection != "undefined")         {  ...
Three.js添加标签、取得面与鼠标交点、画线、小地图（转）
niuge8905的博客
12-27 5410
1.Three.js添加标签 https://threejs.org/examples/?q=label#css2d_label 2.取得面与鼠标交点、画线 https://blog.youkuaiyun.com/ithanmang/article/details/81625996 3.小地图 https://threejs.org/examples/?q=line#webgl_lines_fat_...
vue.js右键点击事件+在光标停靠位置插入文本
WanghaoDyj的博客
11-13 3242
直接在需要右键效果的添加 @contextmenu.prevent='function' function写自己的代码 另外，项目中用到在光标停靠位置插入文本的功能，一并描述一下 insertShort(index) { this.contextmenuShow = false; //选中textarea const myField = document.querySelec...
【jQuery插件】insertContent-在文本框光标位置插入内容并选中
z69183787的专栏
10-12 7134
在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。 IE下可以通过document.selection.createRange();获取光标位置，代码也很简单： 1 if (document.selection) { 2
输入框中默认已有内容，在鼠标位置插入标签，前端
最新发布
03-24
### 前端实现输入框鼠标位置插入标签的方法 在前端开发中，实现在输入框的光标位置动态插入特定内容（如标签）是一个常见的需求。以下是通过 JavaScript 和 Vue.js 的方式来完成这一功能的具体方法。 #### 使用原生 JavaScript 实现 可以通过监听 `input` 或 `click` 事件捕获用户的交互行为，并利用 DOM API 获取光标的当前位置，随后将目标内容插入其中[^1]： ```javascript function insertAtCursor(inputElement, valueToInsert) { const startPos = inputElement.selectionStart; const endPos = inputElement.selectionEnd; const oldValue = inputElement.value; // 将新值插入到选区中间 const newValue = oldValue.substring(0, startPos) + valueToInsert + oldValue.substring(endPos); // 更新输入框的内容并重置光标位置 inputElement.value = newValue; inputElement.setSelectionRange(startPos + valueToInsert.length, startPos + valueToInsert.length); } // 绑定点击事件用于测试 document.getElementById('insertButton').addEventListener('click', () => { const inputValue = document.getElementById('textInput'); insertAtCursor(inputValue, '[TAG]'); }); ``` 上述代码片段展示了如何定义一个函数 `insertAtCursor` 来处理插入逻辑，并绑定按钮触发该操作[^2]。 --- #### 结合 Vue.js 及 Ant Design Vue 实现 如果项目基于 Vue 框架，则可以更高效地管理状态和组件间通信。以下是在 Vue 中结合 Ant Design Vue 的解决方案[^4]: ```html <template> <a-textarea v-model="content" @blur="handleBlur"></a-textarea> <button @click="insertTag">插入 TAG</button> </template> <script> export default { data() { return { content: '', cursorPosition: null, }; }, methods: { handleBlur(event) { this.cursorPosition = event.target.selectionStart; // 记录光标位置 }, insertTag() { if (this.cursorPosition === null || !this.content) return; const beforeText = this.content.slice(0, this.cursorPosition); // 光标前的文字 const afterText = this.content.slice(this.cursorPosition); // 光标后的文字 const tag = '[TAG]'; // 要插入的标签 this.content = `${beforeText}${tag}${afterText}`; this.$nextTick(() => { this.setCursorPosition(this.cursorPosition + tag.length); // 移动光标至插入点之后 }); }, setCursorPosition(position) { const textarea = this.$el.querySelector('textarea'); // 找到对应的 textarea 元素 if (!textarea) return; textarea.focus(); textarea.setSelectionRange(position, position); } }, }; </script> ``` 此方案的核心在于使用 `v-model` 数据绑定以及 `@blur` 事件记录光标位置，在执行插入动作时重新计算字符串拼接的结果，并调整光标位置以保持用户体验一致[^3]。 --- #### 注意事项 - **跨浏览器兼容性**：不同浏览器可能对 `selectionStart`/`selectionEnd` 属性的支持存在差异，需提前验证。 - **性能优化**：频繁更新大文本可能导致界面卡顿，建议针对具体场景评估性能影响。 - **安全性校验**：对于用户输入的数据应做必要的过滤与转义，防止 XSS 攻击等问题发生。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值