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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
理解javascript封装
Feb 23 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
Vue中CSS动画原理的实现
Feb 13 Javascript
vue选项卡切换登录方式小案例
Sep 27 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
php7性能提升的原因详解
2019/10/13 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
工会工作先进事迹
2014/08/18 职场文书
化工实习心得体会
2014/09/09 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技