`
st780206
  • 浏览: 47896 次
  • 性别: Icon_minigender_1
  • 来自: 大连
文章分类
社区版块
存档分类
最新评论

用js在TextArea中的光标位置插入内容的方法

IE 
阅读更多

用js在TextArea中的光标位置插入内容的方法(比较完美)

做UBB版在线编辑器应该会用到,用js在TextArea中的光标位置插入内容的方法.

 

国内网上给出的方法简直是误人子弟,外文站上也都不是太完整,雷锋一回,整理了一套比较好的,代码如下:

 

 

 

myField = document.getElementById("文本控件的ClientID");

 

myValue = "你要插入的内容";

 

----------------------------------------------------------------------------------

 

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 endPos = myField.selectionEnd;

 

    // save scrollTop before insert

 

    var restoreTop = myField.scrollTop;

 

    myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);

 

    if (restoreTop > 0) {

 

      // restore previous scrollTop

 

      myField.scrollTop = restoreTop;

 

    }

 

    myField.focus();

 

    myField.selectionStart = startPos + myValue.length;

 

    myField.selectionEnd = startPos + myValue.length;

 

  } else {

 

    myField.value += myValue;

 

    myField.focus();

 

  }

 

}

分享到:
评论

相关推荐

    使用JS在textarea在光标处插入内容

    在IT领域,特别是前端开发中,使用JavaScript在`textarea`元素的光标位置插入内容是一项常见且实用的技术。本文将详细解析如何实现这一功能,并深入理解其背后的逻辑与原理。 ### 核心知识点:在`textarea`光标处...

    Textarea在光标停留处插入文字

    要实现在光标位置插入文字,首先需要获取到光标位置。在JavaScript中,这可以通过`selectionStart`和`selectionEnd`属性来获取。例如,以下代码可以获取`Textarea`的光标位置: ```javascript var textarea = ...

    在textarea光标处插入文本

    本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境,包括Internet Explorer(IE)和其他基于Mozilla的浏览器(如Firefox)。我们将通过分析提供的代码示例来深入理解其...

    jQuery往textarea中光标所在位置插入文本的方法

    4. 插入文本:在textarea中插入文本涉及到的JavaScript操作包括获取当前光标位置、在光标位置插入字符串、恢复光标焦点等。本文通过判断浏览器类型和版本,使用不同的方法获取和设置光标位置。 5. 文本操作:在...

    JavaScript获取,设置光标位置,兼容InputTextArea

    在JavaScript编程中,获取和设置光标位置是常见的需求,特别是在与用户交互的表单元素如`<input>`和`<textarea>`中。这涉及到DOM(文档对象模型)操作和事件处理,对于创建动态和响应式的网页应用至关重要。本文将...

    vue获取textarea的光标位置.js

    vue通过当前的光标来进行插值,从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理,从而达到对新字符的插入

    JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的操作时,主要涉及两个关键属性:`selectionStart`和`selectionEnd`,以及在IE中使用的`document.selection`对象。 `selectionStart`和`selectionEnd`是...

    javascript 在光标处插入指定内容

    在JavaScript中,向文本输入框或者富文本编辑器在光标位置插入特定内容是一项常见的需求。这涉及到对DOM(文档对象模型)的操作以及对文本选取的理解。以下将详细阐述实现这个功能所需的知识点。 首先,我们需要...

    JS在textarea光标处插入文本的小例子

    标题“JS在textarea光标处插入文本的小例子”和描述“本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器”揭示了该文档是关于如何使用JavaScript在网页文本区域(textarea)组件光标所在位置插入...

    javascript获得光标所在的文本框(text textarea)中的位置.docx

    通过以上介绍,我们可以了解到在JavaScript中获取光标位置的基本原理和技术细节。这不仅有助于我们更好地理解用户的行为,还能为用户提供更加友好的交互体验。希望本文能帮助你在实际项目中有效地利用这些技术点。

    通过javascript在光标处插入文本

    在我们的示例代码中,我们使用了以下代码来获取光标位置: ```javascript function savePos(textBox){ if(typeof(textBox.selectionStart) == "number"){ start = textBox.selectionStart; end = textBox....

    javascript控制在光标位置插入文字适合表情的插入

    标题中的"javascript控制在光标位置插入文字适合表情的插入"描述了一种使用JavaScript实现的功能,即在文本框(textarea)的当前光标位置插入特定的文字或表情。这个功能常见于许多聊天应用或编辑器中,允许用户在...

    javascript实现 在光标处插入指定内容

    在javascript中,我们可以使用getElementsByTagName()方法来获取页面中的所有TEXTAREA元素,然后循环遍历这些元素,以便在每个元素中插入指定的内容。同时,我们也可以使用innerHTML属性来设置TEXTAREA元素的内容,...

    jQueryCursorPlugIn.js textArea文本光标全功能插件

    jQuery textArea文本光标全功能插件,可以获取光标位置,向光标文字插入文本,高亮显示指定的文本块

    jQuery.curpos.js插件获textarea输入框下光标的位置

    记得做前端这一块,很多时候需要判断textarea输入框下的光标位置 比如要在输入的文档中插入一些表情符号,图片之类的,这个时候在插入文字之前, 就需要先判断光标的位置了。今天就特意给大家推荐这样一个小...

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法,并提供相应的代码示例。 首先,了解不同浏览器对于光标位置获取的支持情况是必要的。例如,IE浏览器使用了document....

    JQuery在光标位置插入内容的实现代码

    本文将详细解释如何使用JQuery在光标位置插入内容,并展示实现代码。 首先,我们了解不同浏览器处理光标位置和插入内容的方式。在Internet Explorer(IE)浏览器中,可以使用`document.selection`对象和`...

    jquery textarea插入gif动态QQ表情图片表单提交

    这会在textarea的当前光标位置插入表情。 至于表单提交,当用户完成输入并点击提交按钮时,需要获取textarea的值,包括插入的表情。由于表达式是自定义的字符串,服务器端需要解析这些字符串来显示对应的gif图片。...

Global site tag (gtag.js) - Google Analytics