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操作cookie_获取与修改代码
May 21 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
简单实现jquery焦点图
Dec 12 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
Vue组件跨层级获取组件操作
Jul 27 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python生成并处理uuid的实现方式
2020/03/03 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
学生励志演讲稿
2014/01/06 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
八项规定对照检查材料
2014/08/31 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
横店影视城导游词
2015/02/06 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
复试通知单模板
2015/04/24 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis