基于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 相关文章推荐
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
PHP 在线翻译函数代码
2009/05/07 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
公司市场部岗位职责
2013/12/02 职场文书
家长评语大全
2014/01/22 职场文书
入学生会自荐书范文
2014/02/05 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
产品质量保证书
2014/04/29 职场文书
大专生找工作自荐书
2014/06/10 职场文书
个人四风对照检查材料
2014/09/26 职场文书
学习心理学心得体会
2016/01/22 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android