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 MD4
Dec 20 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
一文了解Vue中的nextTick
May 06 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php去除重复字的实现代码
2011/09/16 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python导入坐标点的具体操作
2019/05/10 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
大学学习生活感言
2014/01/18 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
暖春观后感
2015/06/08 职场文书
退货证明模板
2015/06/23 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Python学习之迭代器详解
2022/04/01 Python