jQuery 在光标定位的地方插入文字的插件


Posted in Javascript onMay 10, 2012

核心代码:

(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)

主要思路:

当点击某个元素的时候,让一个输入框,插入指定的值。?

1.当点击某个元素的时候,应该让输入框获取焦点,因为只有获得了焦点,才能在里面输入值;

IE下:document.selection.createRange()

FF下:var start = dthis.selectionStart;

//获取焦点前坐标

 var end =dthis.selectionEnd;

//获取焦点后坐标

2.获取当前输入框焦点的位置

3.将值插入到输入框焦点的位置;

4.再次获取焦点;保证光标在输入框内 
在线演示: http://demo.3water.com/js/2012/myfocustext/
打包下载: https://3water.com/jiaoben/44153.html

Javascript 相关文章推荐
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
javascript 在firebug调试时用console.log的方法
May 10 #Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 #Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 #Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 #Javascript
jQuery 图片切换插件(代码比较少)
May 07 #Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 #Javascript
js查错流程归纳
May 04 #Javascript
You might like
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
thinkphp分页实现效果
2016/10/13 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
Python字典操作简明总结
2015/04/13 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
使用Python发现隐藏的wifi
2020/03/04 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Pytorch转tflite方式
2020/05/25 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
历史专业个人求职信范文
2013/12/07 职场文书
元宵节主持词
2014/03/25 职场文书
提拔干部考察材料
2014/05/26 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
就业意向协议书
2015/01/29 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
详解OpenCV曝光融合
2022/04/29 Python