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游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js 自动播放的实例代码
Nov 19 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
vue获取input输入值的问题解决办法
Oct 17 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
require.js的用法详解
2015/10/20 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
Python运算符重载详解及实例代码
2017/03/07 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python实现视频读取和转化图片
2019/12/10 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
《池塘边的叫声》教学反思
2014/04/12 职场文书
门店店长岗位职责
2015/04/14 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
经营场所使用证明
2015/06/19 职场文书
志愿者工作心得体会
2016/01/15 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python