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


Posted in Javascript onJune 26, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 基础篇(一)
Mar 30 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
解决vuex刷新数据消失问题
Nov 12 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 #Javascript
JavaScript实现数组随机排序的方法
Jun 26 #Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 #Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 #Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 #Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 #Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 #Javascript
You might like
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
Laravel实现表单提交
2017/05/07 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
英国电气世界:Electrical World
2019/09/08 全球购物
Linux常见面试题
2016/10/04 面试题
运动会广播稿50字
2014/01/26 职场文书
邀请函范文
2015/02/02 职场文书
信访工作个人总结
2015/03/03 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
mysql 排序失效
2022/05/20 MySQL