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 相关文章推荐
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
js实现网页收藏功能
Dec 17 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
实例详解Node.js 函数
Jun 10 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
Vuex的各个模块封装的实现
2020/06/05 Javascript
Python实现简单字典树的方法
2016/04/29 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
wxpython绘制圆角窗体
2019/11/18 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
化学专业自荐信
2014/05/28 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
音乐幼师求职信
2014/07/09 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL