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 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 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中定时计划任务的实现原理
2013/01/08 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
高一数学教学反思
2014/02/07 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
项目施工员岗位职责
2014/03/09 职场文书
大学新生入学教育方案
2014/05/16 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2015年护士节慰问信
2015/03/23 职场文书
工作简报范文
2015/07/21 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android