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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
JavaScript 实现??打印?理
Apr 28 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Python通过字典映射函数实现switch
2020/11/06 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
极简的HTML5模版
2015/07/09 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
override和overload的区别
2016/03/09 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
前台文员我鉴定
2014/01/12 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书