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 设计模式 安全沙箱模式
Sep 24 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
Vue2.0 实现移动端图片上传功能
May 30 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
php中截取中文字符串的代码小结
2011/07/17 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
Python中的类学习笔记
2014/09/23 Python
推荐11个实用Python库
2015/01/23 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
python中的for循环
2018/09/28 Python
python自动化生成IOS的图标
2018/11/13 Python
基于django传递数据到后端的例子
2019/08/16 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
模范教师事迹材料
2014/02/10 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
教师新年寄语
2014/04/03 职场文书
大学生就业策划书范文
2014/04/04 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
导游词之四川武侯祠
2019/10/21 职场文书