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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
关于Js中new操作符的作用详解
Feb 21 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
js 调用百度分享功能
2017/02/27 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python获取中文字符串长度的方法
2018/11/14 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
法人代表证明书
2014/09/18 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
导游词之丽江普济寺
2019/10/22 职场文书