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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 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目录与文件操作
2011/12/30 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
React Router基础使用
2017/01/17 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
js实现简单模态框实例
2018/11/16 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python实现折半查找和归并排序算法
2017/04/14 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
大学生求职简历的自我评价
2013/10/21 职场文书
考博自荐信
2013/10/25 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
2014年度工作总结报告
2014/12/15 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python