jQuery往textarea中光标所在位置插入文本的方法

 更新时间:2015年06月26日 16:08:40   作者:冥想_  
这篇文章主要介绍了jQuery往textarea中光标所在位置插入文本的方法,实例分析了jQuery操作光标及文本的相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法。分享给大家供大家参考。具体实现方法如下:

<html>
<head>
<script src="jquery-1.8.1.min.js"></script>
<script >
$(function() {
 /* 在textarea处插入文本--Start */
 (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);
 /* 在textarea处插入文本--Ending */
});
$(document).ready(function(){
 $("#ch_button").click( function () { 
 $("#test_in").insertContent("<upload/day_140627/201406271546349972.jpg>"); 
 });
});
</script>
</head>
<body >
<button id="ch_button" value="插入" >插入</button>
<textarea name="content" id="test_in" rows="30" cols="100">
</textarea>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章

  • Jquery 实现弹出层插件

    Jquery 实现弹出层插件

    这篇文章主要介绍了Jquery 实现弹出层插件,包括遮罩层、插件参数、关闭动作、拖拽效果等,需要的朋友可以参考下
    2015-01-01
  • JQuery的Pager分页器实现代码

    JQuery的Pager分页器实现代码

    这篇文章主要为大家详细介绍了JQuery的Pager分页器实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 单击按钮发送验证码,出现倒计时的简单实例

    单击按钮发送验证码,出现倒计时的简单实例

    下面小编就为大家带来一篇单击按钮发送验证码,出现倒计时的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 基于jQuery实现在线选座之高铁版

    基于jQuery实现在线选座之高铁版

    除了购买电影票在线选座,我们还接触过飞机机舱选座,随着科技的发展,之后火车、汽车都会支持在线选座,下面给大家分享基于jQuery实现在线选座之高铁版,需要的朋友可以参考下
    2015-08-08
  • jQuery)扩展jQuery系列之一 模拟alert,confirm(一)

    jQuery)扩展jQuery系列之一 模拟alert,confirm(一)

    很多人都为了使alert系统的调用函数在自己的控制范围之内,都选择了去封装一个属于自己的alert组件,现在我们就动手实现一个这样的小部件。
    2010-12-12
  • jQuery中filter()和find()的区别深入了解

    jQuery中filter()和find()的区别深入了解

    一直不是很清楚filter()方法和find()方法的区别,看jQuery Cookbook一书后,终于算是搞清楚了,下面将新的与大家分享下
    2013-09-09
  • JQuery筛选器全系列介绍

    JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象。在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件。选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象
    2013-08-08
  • jQuery中innerWidth()方法用法实例

    jQuery中innerWidth()方法用法实例

    这篇文章主要介绍了jQuery中innerWidth()方法用法,实例分析了innerWidth()方法的功能、定义及获取第一个匹配元素内部区域宽度的使用技巧,需要的朋友可以参考下
    2015-01-01
  • JQuery 返回布尔值Is()条件判断方法代码

    JQuery 返回布尔值Is()条件判断方法代码

    JQuery里面的方法大多是返回JQuery对角.而Is()方法,返回的一个布尔值
    2012-05-05
  • jQuery动态移除和添加背景图片的方法详解

    jQuery动态移除和添加背景图片的方法详解

    这篇文章主要介绍了jQuery动态移除和添加背景图片的方法,结合实例形式分析了jQuery针对页面元素样式及事件响应的动态操作技巧,需要的朋友可以参考下
    2017-03-03

最新评论