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 相关文章推荐
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
Html5生成验证码的示例代码
May 10 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/12/05 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
php实现用户登陆简单实例
2017/04/04 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
php函数式编程简单示例
2019/08/08 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
促销活动方案模板
2014/02/24 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
高三语文教学反思
2016/02/16 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python