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写的日历(包括日历的样式及功能)
Apr 23 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
vue使用axios实现excel文件下载的功能
Jul 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
我的群发邮件程序
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
php远程下载类分享
2016/04/13 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
jQuery实现菜单栏导航效果
2017/08/15 jQuery
JavaScript实现图片拖曳效果
2017/09/08 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
在Python中使用模块的教程
2015/04/27 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
深入理解python对json的操作总结
2017/01/05 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
年会搞笑主持词串词
2014/03/24 职场文书
颁奖晚会主持词
2014/03/25 职场文书
年终晚会主持词
2014/03/25 职场文书
历史学专业求职信
2014/06/19 职场文书
教师岗位职责
2015/02/03 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android