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实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
js实现select跳转功能代码
Oct 22 Javascript
jquery分割字符串的方法
Jun 24 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
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实现Ftp用户的在线管理的代码
2007/03/06 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Tensorflow卷积神经网络实例
2018/05/24 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
超市商业计划书
2014/05/04 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
八达岭长城导游词
2015/01/30 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android