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中setAttribute用法介绍
Jul 20 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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程序中的常见漏洞进行攻击
2006/10/09 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php分页代码学习示例分享
2014/02/20 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
微信小程序日历插件代码实例
2019/12/04 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
详解Python3注释知识点
2019/02/19 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
简单了解python中的与或非运算
2019/09/18 Python
django orm模块中的 is_delete用法
2020/05/20 Python
如何基于Python按行合并两个txt
2020/11/03 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
考察邀请函范文
2015/01/31 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android