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与prototype框架的详细对比
Nov 21 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
Jquery性能优化详解
May 15 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
javascript解析json实例详解
Nov 05 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php微信开发之关注事件
2018/06/14 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Django实现文件上传下载
2019/10/06 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
中秋寄语大全
2014/04/11 职场文书
初中学校军训方案
2014/05/09 职场文书
出国英文推荐信
2014/05/10 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
入党函调证明材料
2014/12/24 职场文书
Redis入门教程详解
2021/08/30 Redis
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
Minikube搭建Kubernetes集群
2022/03/31 Servers
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js