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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
javascript 三种编解码方式
Feb 01 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
Vue中的组件及路由使用实例代码详解
May 22 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
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
django解决订单并发问题【推荐】
2019/07/31 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
几个SQL的面试题
2014/03/08 面试题
简历的自我评价范文
2014/02/04 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
团队经理竞聘书
2014/03/31 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
生活委员竞选稿
2015/11/21 职场文书
Python anaconda安装库命令详解
2021/10/16 Python
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python