基于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 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
js转义字符介绍
Nov 05 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 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无限分类源码分享(思路不错)
2011/10/13 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
javascript的事件描述
2006/09/08 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
50道外企软件测试面试题
2014/08/18 面试题
军校大学生个人的自我评价
2014/02/17 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
幼师小班个人总结
2015/02/12 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
浅谈JS的原型和原型链
2021/06/04 Javascript
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript