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 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
Prototype Class对象学习
Jul 19 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
详解js的视频和音频采集
Aug 09 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的面向对象编程
2006/10/09 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
老生常谈js数据类型
2017/08/03 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
python生成指定长度的随机数密码
2014/01/23 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
flask中的wtforms使用方法
2018/07/21 Python
用Django写天气预报查询网站
2018/10/21 Python
如何使用python传入不确定个数参数
2020/02/18 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
维也纳通行证:Vienna PASS
2019/07/18 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
学生检讨书范文
2019/06/24 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL