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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
深入了解JavaScript 私有化
May 30 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
JavaScript组合继承详解
Nov 07 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
大学生职业规划论文
2014/01/11 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
庆七一宣传标语
2014/10/08 职场文书
复活读书笔记
2015/06/29 职场文书
Python中文纠错的简单实现
2021/07/07 Python
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python