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 学习之旅 (1)
Feb 05 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
分享vue里swiper的一些坑
Aug 30 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python中的super用法详解
2015/05/28 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
python实现静态web服务器
2019/09/03 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
介绍一下grep命令的使用
2012/06/28 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
安全标准化汇报材料
2014/02/03 职场文书
音乐教育感言
2014/03/05 职场文书
分公司负责人任命书
2014/06/04 职场文书
环保标语口号
2014/06/13 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技