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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
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+DBM的同学录程序(1)
2006/10/09 PHP
php session 错误
2009/05/21 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
python的pip安装以及使用教程
2018/09/18 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python数值基础知识浅析
2019/11/19 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python多线程获取返回值代码实例
2020/02/17 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
测试工程师岗位职责
2013/11/28 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
企业员工薪酬方案
2014/06/04 职场文书
2014年学生工作总结
2014/11/20 职场文书
质检员岗位职责范本
2015/04/07 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电