JQ在光标处插入文字
内容转载自网络
这是一个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在光标处插入文字的更多相关文章
- textarea光标处插入文字
(function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...
- textarea 在光标处插入文字
效果演示 // 欢迎访问cssfirefly.cnblogs.com html: <textarea id="text" style="width:500px;he ...
- 【Javascript】在文本框光标处插入文字并定位光标 (转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字
近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...
- 使用JS在textarea在光标处插入内容
// 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE supp ...
- js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript实现在textarea光标位置插入文字并移动光标到文字末尾
1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...
- kindeditor在光标处插入编辑器外的数据
页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...
- textarea在光标位置插入文字
最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...
随机推荐
- Win11曝光 代号“Core OS” 明年推出-IT外包
Win10发布距今已经有两年半的时间了,微软对其"修修补补"也有五次了,而第六次的更新也正在进行中.根据消息爆料,Win 11级别的开发项目"Windows Core O ...
- 02-python中列表的增删改查
增: append() #添加到原有列表的最后 In [1]: names = ["老王","老李","老刘","老张" ...
- 关于我上传的activiti自定义流程demo的说明
最近又收到了一些询问activiti的问题,其中好几个都是向我索要我上传的这个activiti自定义流程demo的数据库设计. 索要的多了,而我早就把这个库给删掉了,所以我便觉得有必要做一个说明: 我 ...
- 5.2 TLP的路由
TLP的路由是指TLP通过Switch或者PCIe桥片时采用哪条路径,最终到达EP或者RC的方法.PCIe总线一共定义了三种路由方法,分别是基于地址(Address)的路由,基于ID的路由和隐式路由( ...
- 安装sphinx和coreseek
sphinx简介 Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个全文检索引擎.意图为其他应用提供高速.低空间占用.高结果 相关度的全文搜索功能.Sphinx可以非常容易的与SQL数 ...
- DML触发器1
数据库触发器是特殊的存储程序.通常不直接调用它们,而是由数据库的事件触发. 触发器分类: >DML触发器 >instead-of触发器 >系统事件触发器,还可以是DDL 一. DML ...
- Flex报错之二
1.错误描述 SecurityError: Error #2148: SWF 文件 file:///D:/Adobe Flash Builder 4 Installer/demo1/bin-debug ...
- SDP(10):文本式大数据运算环境-MongoDB-Engine功能设计
为了让前面规划的互联网+数据平台能有效对电子商务数据进行管理及实现大数据统计功能,必须在平台上再增加一个MongDB-Engine:数据平台用户通过传入一种Context来指示MongoDB-Engi ...
- EntityFramework Core 2.0 Explicitly Compiled Query(显式编译查询)
前言 EntityFramework Core 2.0引入了显式编译查询,在查询数据时预先编译好LINQ查询便于在请求数据时能够立即响应.显式编译查询提供了高可用场景,通过使用显式编译的查询可以提高查 ...
- webpacke踩坑-新手
1.题叶-webpack入门指南 2.webpack入门系列 3.w3ctech的webpack入门及实践 4.Express结合Webpack的全栈自动刷新 5.webpack 单页面应用实战 6. ...