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脚本实现Web页面信息交互
Dec 21 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
js动态引入的四种方法
May 05 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
javascript实现弹出层效果
Dec 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
PHP 函数学习简单小结
2010/07/08 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
年终自我鉴定
2013/10/09 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
公益广告语集锦
2014/03/13 职场文书
寒山寺导游词
2015/02/03 职场文书
培训通知
2015/04/17 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
linux目录管理方法介绍
2022/06/01 Servers