基于jQuery的输入框在光标位置插入内容, 并选中


Posted in Javascript onOctober 29, 2011
// 
//使用方法 
//$(文本域选择器).insertContent("插入的内容"); 
//$(文本域选择器).insertContent("插入的内容",数值); //根据数值选中插入文本内容两边的边界, 数值: 0是表示插入文字全部选择,-1表示插入文字两边各少选中一个字符。 
// 
//在光标位置插入内容, 并选中 
(function($) { 
$.fn.extend({ 
insertContent: function(myValue, t) { 
var $t = $(this)[0]; 
if (document.selection) { //ie 
this.focus(); 
var sel = document.selection.createRange(); 
sel.text = myValue; 
this.focus(); 
sel.moveStart('character', -l); 
var wee = sel.text.length; 
if (arguments.length == 2) { 
var l = $t.value.length; 
sel.moveEnd("character", wee + t); 
t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length); 
sel.select(); 
} 
} else if ($t.selectionStart || $t.selectionStart == '0') { 
var startPos = $t.selectionStart; 
var endPos = $t.selectionEnd; 
var scrollTop = $t.scrollTop; 
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length); 
this.focus(); 
$t.selectionStart = startPos + myValue.length; 
$t.selectionEnd = startPos + myValue.length; 
$t.scrollTop = scrollTop; 
if (arguments.length == 2) { 
$t.setSelectionRange(startPos - t, $t.selectionEnd + t); 
this.focus(); 
} 
} 
else { 
this.value += myValue; 
this.focus(); 
} 
} 
}) 
})(jQuery);
Javascript 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
实例讲解vue源码架构
Jan 24 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 #Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 #Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 #Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
js常用代码段收集
Oct 28 #Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 #Javascript
理解JSON:3分钟课程
Oct 28 #Javascript
You might like
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
windows下ipython的安装与使用详解
2016/10/20 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
python 如何调用远程接口
2020/09/11 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
软件测试面试题
2015/10/21 面试题
致800米运动员广播稿
2014/02/16 职场文书
抄作业检讨书
2014/02/17 职场文书
学校社会实践活动总结
2014/07/03 职场文书
门面房租房协议书
2014/08/20 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js
netty 实现tomcat的示例代码
2022/06/05 Servers