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.ajax传递中文参数的解决方法
May 28 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 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中strlen和mb_strlen函数的区别
2014/03/07 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
使用js 设置url参数
2013/07/08 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
在python里面运用多继承方法详解
2019/07/01 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
医院门卫岗位职责
2013/12/30 职场文书
村长贪污检举信
2014/04/04 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL