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实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
Node.js模块加载详解
Aug 16 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 Javascript
jQuery实现评论模块
Aug 19 jQuery
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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php部分常见问题总结
2008/03/27 PHP
常用PHP封装分页工具类
2017/01/14 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
DEFER怎么用?
2006/07/01 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python实现list反转实例汇总
2014/11/11 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
团员的自我评价
2013/12/01 职场文书
培训讲师邀请函
2014/01/10 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
詹天佑教学反思
2014/04/30 职场文书
科学发展观演讲稿
2014/09/11 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
上课说话检讨书500字
2014/11/01 职场文书
学前班学生评语
2014/12/29 职场文书
教师个人师德总结
2015/02/06 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android