jQuery 在光标定位的地方插入文字的插件_jquery

核心代码:

复制代码 代码如下:

(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.jb51.net/js/2012/myfocustext/
打包下载: http://www.jb51.net/jiaoben/44153.html

时间: 2024-09-20 16:33:36

jQuery 在光标定位的地方插入文字的插件_jquery的相关文章

jquery实现可旋转可拖拽的文字效果代码_jquery

本文实例讲述了jquery实现可旋转可拖拽的文字效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript

jQuery实现带水平滑杆的焦点图动画插件_jquery

这是一款很实用的jQuery焦点图动画插件,跟其他jQuery焦点图插件不同的是,它带有一个水平的滑杆,你可以通过滑动滑杆实现图片的切换,也可以通过点击图片来切换.这款焦点图是纯jQuery实现的,兼容性和实用性都还可以,而且也比较简单,很容易集成到需要的项目中去. 效果展示如下所示:   HTML代码 <div id="wrapper"> <ul id="flip"> <li title="The first image&q

jquery 鼠标(光标)定位在文本框末尾例子

$.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSelection(position, position); } $.fn.setSelection = function(selectionStart, selectionEnd) { if(this.lengh == 0) return this; input = this[0]; if (input.

11个用于提高排版水平的基于jquery的文字效果插件_jquery

排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+

jquery.fileEveryWhere.js 一个跨浏览器的file显示插件_jquery

先来看看input type="file"在chrome,ie,firefox这三个浏览器下表情各异吧.       chrome像是button+label组合,看起差异最大. ff和ie,是text+button的组合,就外形来看,firefox更标准,事实上firefox存在两个潜在问题:  1,firefox对type="file" 的input的width定义目前是不支持的(但是FF支持size属性,可以给size设置一个值,来控制上传框的大小,至于这个s

基于jQuery的淡入淡出可自动切换的幻灯插件_jquery

其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载  使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 复制代码 代码如下: <script src="http://ajax.googleapis.com/ajax/libs/jq

jquery 最简单易用的表单验证插件_jquery

复制代码 代码如下: /* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is("form") ) return; //获取参数 var items = $.isArray(arguments[0]) ? arguments[0] : [], isBindSubmit = typeof arguments[

EasySlider 基于jQuery功能强大简单易用的滑动门插件_jquery

Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了.EasySlider的功能 支持横向或纵向滑动 支持自动滚动 支持连续滑动 "上一屏"和"下一屏按钮" "到第一屏"和"最后一屏"按钮 隐藏的控制 可选的控制按钮包围标记 同一页面可支持多个滑动门 可设置

jquery 图片预加载 自动等比例缩放插件_jquery

复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大