内容转载自网络
这是一个JQ的扩展方法。在teatarea获得焦点时,往光标处插入文字,扩展代码如下
(function($){
$.fn.extend({
"insert":function(value){
//默认参数
value=$.extend({
"text":"123"
},value);
var dthis = $(this)[0]; //将jQuery对象转换为DOM元素
//IE下
if(document.selection){
$(dthis).focus(); //输入元素textara获取焦点
var fus = document.selection.createRange();//获取光标位置
fus.text = value.text; //在光标位置插入值
$(dthis).focus(); ///输入元素textara获取焦点
}
//火狐下标准
else if(dthis.selectionStart || dthis.selectionStart == '0'){
var start = dthis.selectionStart;    //获取焦点前坐标
var end =dthis.selectionEnd;   //获取焦点后坐标
//以下这句,应该是在焦点之前,和焦点之后的位置,中间插入我们传入的值 .然后把这个得到的新值,赋给文本框
dthis.value = dthis.value.substring(0, start) + value.text + dthis.value.substring(end, dthis.value.length); }
//在输入元素textara没有定位光标的情况
else{
this.value += value.text; this.focus();
};
return $(this);
}
})
})(jQuery)

扩展方法调用方法为

//给按钮添加点击事件,
$('#btn').on('click',function(){
$("目标textarea框").insert({"text":"要添加的文字"});
});

JQ在光标处插入文字的更多相关文章

  1. textarea光标处插入文字

    (function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...

  2. textarea 在光标处插入文字

    效果演示 // 欢迎访问cssfirefly.cnblogs.com html: <textarea id="text" style="width:500px;he ...

  3. 【Javascript】在文本框光标处插入文字并定位光标 (转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

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

    // 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE supp ...

  6. js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  8. kindeditor在光标处插入编辑器外的数据

    页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...

  9. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

随机推荐

  1. 网络基础tcp/ip协议三

    数据链路层:(位于网络层与物理层之间) 数据链路层的功能: 数据链路的建立,维护. 帧包装,帧传输,帧同步. 帧的差错恢复. 流量的控制. 以太网:(工作在数据链路层) CSMA/CD(带冲突检测的载 ...

  2. Centos 6.5升级openssh漏洞

    CentOS 6.5下openssh升级 在有的企业中每年都会安全扫描,因为实现远程连接比较重要,如果openssh版本过低,就要对其升级,本文主要讲述openssh升级的步骤. openssh升级主 ...

  3. 第II篇PCI Express体系结构概述

    虽然PCI总线取得了巨大的成功,但是随着处理器主频的不断提高,PCI总线提供的带宽愈发显得捉襟见肘.PCI总线也在不断地进行升级,其位宽和频率从最初的32位/33MHz扩展到64位/66MHz,而PC ...

  4. CameraLink通信接口的一般定义

    CameraLink是从Channel link技术上发展而来的,基于视频应用发展而来的通信接口,在机器视觉系统中广泛应用. 2000年10月美国NI.摄像头供应商和其他图像采集公司联合推出了Came ...

  5. mysql数据库常用数据类型

    1.整数:TINYINT.SMALLINT.MEDIUMINT.INT(INTEGER).BIGINT,比较常用的是INT,这五种类型只是取值范围不一样,具体的范围可以在mysql shell界面使用 ...

  6. 在Ubuntu 中使用Source Code Pro字体

    1.下载字体 推荐GitHub上面的项目主页上下载 Source Code Pro 2.解压 unzip SourceCodePro_FontsOnly-1.013.zip 3. 打开SourceCo ...

  7. 用Dw CS6运行静态页面出问题

    1.报错截图一 2.报错截图二

  8. 【mongodb系统学习之十】mongodb查询(三)

    6).特殊类型的查询: A).查询键为null的文档:查询时,如果按常规的key:null的方式做条 件,不仅会匹配到值为null的,还会匹配到不存在这个键的:如果只是要值为null的文档,就必须使用 ...

  9. .Net之路,感谢对我深远影响的三位前辈

    为什么要写这篇文章?为什么创立这个站点? 本人大四,学习.Net三年有余,随着近期开始转向对.Net Core的关注,我开始了解到了张善友(www.csharpkit.com).腾飞(www.jess ...

  10. Complete the Word CodeForces - 716B

    ZS the Coder loves to read the dictionary. He thinks that a word is nice if there exists asubstring  ...