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

代码如下:

(function($){
$.fn.extend({
insertAtCaret: function(myValue){
var $t=$(this)[0];
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else
if ($t.selectionStart || $t.selectionStart == '0') {
var startPos = $t.selectionStart;
var endPos = $t.selectionEnd;
var scrollTop = $t.scrollTop;
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
this.focus();
$t.selectionStart = startPos + myValue.length;
$t.selectionEnd = startPos + myValue.length;
$t.scrollTop = scrollTop;
}
else {
this.value += myValue;
this.focus();
}
}
})
})(jQuery);

使用方法:


代码如下:

$(selector).insertAtCaret("value");

赞 (0)

相关推荐

  • jQuery设置聚焦并使光标位置在文字最后的实现方法

    如下所示: $.fn.setCursorPosition = function(position) { if (this.lengh == 0) return this; return $(this).setSelection(position, position); }; $.fn.setSelection = function(selectionStart, selectionEnd) { if (this.lengh == 0) return this; input = this[0];

  • 文本域光标操作的jQuery扩展分享

    该针对文本域的扩展实现的功能及使用方法:1.获取光标位置:$(elem).iGetFieldPos():2.设置光标位置:$(elem).iSelectField(start):3.选中指定位置内的字符:$(elem).iSelectField(start,end):4.选中指定的字符:$(elem).iSelectStr(str):5.在光标之后插入字符串:$(elem).iAdd(str):6.删除光标前面(-n)或者后面(n)的n个字符:$(elem).iDel(n): jQuery扩展代

  • jquery实现在光标位置插入内容的方法

    本文实例讲述了jquery实现在光标位置插入内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>  <head>      <title>无标题页</title>      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>     

  • jquery聚焦文本框与扩展文本框聚焦方法

    光标聚焦的位置在最前面 复制代码 代码如下: <!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&g

  • 基于jQuery的输入框在光标位置插入内容, 并选中

    复制代码 代码如下: // //使用方法 //$(文本域选择器).insertContent("插入的内容"); //$(文本域选择器).insertContent("插入的内容",数值); //根据数值选中插入文本内容两边的边界, 数值: 0是表示插入文字全部选择,-1表示插入文字两边各少选中一个字符. // //在光标位置插入内容, 并选中 (function($) { $.fn.extend({ insertContent: function(myValue,

  • JQuery文本改变触发事件如聚焦事件、失焦事件

    Juery中聚焦事件: 复制代码 代码如下: $("#id").focus(function(){ }); 失焦事件: 复制代码 代码如下: $("#id").blur(function(){ }); 但是文本改变事件却不能这样写: 复制代码 代码如下: $("#id").change(function(){ }); 文本改变事件可以这样写,propertychange是属性改变时触发事件 复制代码 代码如下: $("#id"

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

    本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <script src="jquery-1.8.1.min.js"></script> <script > $(function() { /* 在textarea处插入文本--Start */ (function($) { $.fn.extend({ insertContent : f

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

    复制代码 代码如下: (function($){ $.fn.extend({ insertAtCaret: function(myValue){ var $t=$(this)[0]; if (document.selection) { this.focus(); sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if ($t.selectionStart || $t.selection

  • vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: <div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item" @dragstart="dragStart($event, item.labelName)" draggable='true' v-for="(item, index) in modelCommonList" :key="index" @click=&quo

  • JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法.分享给大家供大家参考,具体如下: <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"> <input type="button" onclick=

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

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • C#实现winform中RichTextBox在指定光标位置插入图片的方法

    本文实例讲述了C#实现winform中RichTextBox在指定光标位置插入图片的方法.分享给大家供大家参考,具体如下: //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; //从鼠标焦点处开始选中几个字符 this.richTextBox1.SelectionLength = 2; //清空剪切板,防止里面之前有内容 Clipboard.Clear(); //给剪切板设置图片对象

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

    直接上代码吧,用js控制在光标位置插入. 在实现表情的插入时用到了. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <script type='text/javascript'> function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.

  • JS实现在文本指定位置插入内容的简单示例

    实例如下所示: function insertAtCursor(myField, myValue) { //IE 浏览器 if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select(); } //FireFox.Chrome等 else if (myField.selectionStart || myField.selection

  • textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)

    更简单的在光标处插入文字 先在本文框中点鼠标以确定光标位置. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 需要注意的是document.selection.createRange是IE独有的 而firefox也有独有的一套 复制代码 代码如下: var $obj = document.getElementById("words"); var selstart = $obj.selectionStart; //文字浮标选择的开始位置 var selend = $obj.s

随机推荐