有些时候我们已经在textarea中输入了一些字符，然后想在鼠标指定的位置插入表情或者字符，这就需要用到jquery的一个小插件了。

代码如下：

(function ($) {

	$.fn.extend({

		insertAtCaret: function (myValue) {

			var $t = $(this)[0];

			if (document.selection) {

				this.focus();

				sel = document.selection.createRange();

				sel.text = myValue;

				this.focus();

			} 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;

			} else {

				this.value += myValue;

				this.focus();

			}

		}

	});

})(jQuery);

我们写个小页面，测试一下该插件。

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

	</head>

	<body>

		<div class="container">

			<div class="row">

				<div class="col col-sm-12">

					<button class="btn btn-danger" data-param="{$buyer}">买家</button>

					<button class="btn btn-danger" data-param="{$address}">地址</button>

				</div>

				<div class="col col-sm-12">

					<textarea class="form-control" id="content" rows="10"></textarea>

				</div>

			</div>

		</div>

		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

		<script>

		(function ($) {

			$.fn.extend({

				insertAtCaret: function (myValue) {

					var $t = $(this)[0];

					if (document.selection) {

						this.focus();

						sel = document.selection.createRange();

						sel.text = myValue;

						this.focus();

					} 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;

					} else {

						this.value += myValue;

						this.focus();

					}

				}

			});

		})(jQuery);

		$("button").on("click", function() {

			$("#content").insertAtCaret($(this).attr("data-param"));

		});

		</script>

	</body>

</html>

显示如下：

在textarea中鼠标指定的位置插入字符或表情的更多相关文章

  1. 【转载】C#中使用Insert方法往ArrayList集合指定索引位置插入新数据

    ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,在ArrayList集合操作过程中,可以使用ArrayList集合类的I ...

  2. 【转载】 C#中List集合使用InsertRange方法在指定的位置插入另一个list集合

    在C#的List集合操作过程中,如果在集合中的某个位置插入一个新的元素对象,可以使用Insert方法进行操作.其实List集合也提供了在特定的位置插入另一个集合,然后另一个集合的数据整个写入到当前集合 ...

  3. 从a-zA-Z0-9特殊字符中生成指定数量的随机字符密码的多层for循环跳出

    师从‘百测’besttest 今日牛老师布置了一个作业,生成一个随机密码,且要包含大写字母.小写字母.数字和特殊字符,且不能重复. 想着先生成密码,然后用各字符去检查是否存在,使用for嵌套循环. i ...

  4. winform中RichTextBox在指定光标位置插入图片

    代码如下: //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; //从鼠标焦点处开始选中 ...

  5. 每日分享！～ JavaScript（js数组如何在指定的位置插入一个元素）

      这个想法是在一个面试题中看到的: 题目是这样的: // 一个数组,在指定的index 位置插入一个元素,返回一个新的数组,不改变原来的数组 <script> function inse ...

  6. C#-WinForm-如何获取文本框（TextBox）中鼠标，光标位置

    文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变 ...

  7. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

  8. 设置输入域(input/textarea)中文本光标的位置

    以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...

  9. Extjs4 中在指定光标处插入值

    var rulearea = Ext.getCmp(文本域Id); var rulevalue = rulearea.getValue();// 获取文本textarea 里面的值 var start ...

随机推荐

  1. 转：探讨JS合并两个数组的方法

    我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况. 比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: ...

  2. ARP协议，以及ARP欺骗

    1.定义: 地址解析协议,即ARP(Address Resolution Protocol),是根据IP地址获取物理地址的一个TCP/IP协议.主机发送信息时将包含目标IP地址的ARP请求广播到网络上 ...

  3. week5 04 npm run build

    上期 我们完成了nodeserver的创建 用的是express genrealtor那个工具 我们在server端执行 起来了 然后我们改一下 删一下 我们觉着暂时没用的东西 首先去app.js程序 ...

  4. 0.1Linux系统开发Angular项目一一首次运行环境的安装（chrome ，terminator，git，node）

    首先,保证你已经安装了虚拟机(虚拟机可以用virturalbox或者VM)并安装了ubuntu镜像! 安装Chrome浏览器 安装terminator(可以多开)代替原来的命令行工具 sudo apt ...

  5. [Android] Robotium手机自动化测试（仅需apk安装包版）——环境搭建 【转】

    Robotium的手机自动化测试,很多都是利用app源代码里的Id定义来开发自动化脚本.而在我开始要为项目中的app写自动化测试脚本的时 候,开发的环境还很不稳定,app也还处于开发的状态中,而且,在 ...

  6. ubuntu14配置opencv3.4.1（转）

    网站:https://blog.csdn.net/a1429331875/article/details/31539129 写此博客的目的是为了方便大家的学习,我是搞了半天,通过上网查找资料才成功的. ...

  7. webpack相关配置

    cd 项目文件夹 npm init -y npm install jquery -S //生成node_modules 下载好jquery 创建webpack.config.js module.exp ...

  8. 转载一篇必须超级好的JVM配置实战

    不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Java ...

  9. node+mysql简单注册

    1前台文件 <!doctype html> <html> <head> <meta charset="UTF-8" /> <t ...

  10. 安装三代组装canu、smartdenovo、wtdbg及矫正软件Racon、Nanopolish的安装

    1)三代组装软件 ------------------------------------------------------------------canu--------------------- ...