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 相关文章推荐
html向js方法传递参数具体实现
Aug 08 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
JavaScript编写开发动态时钟
Jul 29 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/10/27 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
使用python实现接口的方法
2017/07/07 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python实现FM算法解析
2019/06/18 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
七年级生物教学反思
2014/01/30 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
2015年新学期寄语
2015/02/26 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年采购工作总结
2015/04/10 职场文书
2016新年晚会开场白
2015/12/03 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
MySQL慢查询的坑
2021/04/28 MySQL
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript