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 相关文章推荐
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
JS闭包用法实例分析
Mar 27 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
layui select动态添加option的实例
Mar 07 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
python字典序问题实例
2014/09/26 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
绿色校园广播稿
2014/10/13 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers