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

 更新时间:2012年05月10日 22:14:56   作者:  
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/
打包下载: https://www.jb51.net/jiaoben/44153.html

相关文章

  • jQuery事件注册的实现示范

    jQuery事件注册的实现示范

    jQuery为我们提供了方便的事件注册机制,它的优点,操作简单,且不用担心事件覆盖等问题。缺点,普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法
    2022-07-07
  • 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息

    这篇文章主要介绍了基于JQuery实现滚动到页面底端时自动加载更多信息,类似微博,新浪新闻的评论等,都采用了这方法,需要的朋友可以参考下
    2014-01-01
  • 超赞的jQuery图片滑块动画特效代码汇总

    超赞的jQuery图片滑块动画特效代码汇总

    本文将为大家收集10个超赞的jQuery图片滑块动画,都是小编精挑细选而来,希望这些现成的jQuery插件将为你节省很多开发时间。
    2016-01-01
  • juqery 学习之三 选择器 可见性 元素属性

    juqery 学习之三 选择器 可见性 元素属性

    juqery 学习之三 选择器 可见性 元素属性,需要的朋友可以参考下。
    2010-11-11
  • 跟着JQuery API学Jquery 之二 属性

    跟着JQuery API学Jquery 之二 属性

    在选择器的API学习中,走马观花的把选择器过了一遍,但是选择归选择,选择出来了没干什么事,也没有什么用嘛
    2010-04-04
  • jQuery如何设置背景颜色

    jQuery如何设置背景颜色

    这篇文章主要介绍了jQuery如何设置背景颜色,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • JQuery页面地址处理插件jqURL详解

    JQuery页面地址处理插件jqURL详解

    这篇文章主要介绍了JQuery页面地址处理插件jqURL详解的相关资料,需要的朋友可以参考下
    2015-05-05
  • jQuery实现的简单分页示例

    jQuery实现的简单分页示例

    这篇文章主要介绍了jQuery实现的简单分页,涉及jQuery数学运算与页面元素操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jquery 中toggle的2种用法详解(推荐)

    jquery 中toggle的2种用法详解(推荐)

    下面小编就为大家带来一篇jquery 中toggle的2种用法详解(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jQuery1.6 正式版发布并提供下载

    jQuery1.6 正式版发布并提供下载

    据jQuery官方博客5月3日的最新消息,jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性(Attribute)模型的重要重写,还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。
    2011-05-05

最新评论