有些时候我们已经在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. American Football Vocabulary!

    American Football Vocabulary! Share Tweet Share You’ll learn all about the vocabulary of American fo ...

  2. numpy-帮助文档 & 速查表.md

    目录 转相关资料: 速查表 速查代码 转相关资料: 官方手册 易佰教程 gitbook ZMonster's Blog 速查表 速查代码 # -*- coding: utf-8 -*- "& ...

  3. ArcMap导入图层出现General function failure问题 [转]

      ArcMap导入图层出现General function failure问题 [转] Link: http://www.cnblogs.com/angelx/p/3391967.html 问题描述 ...

  4. jenkins 自动触发

    在gitlab上配置连接jenkins ,将Jenkins的Secret token 与Build URL 复制到gitlab中 在settings标签下面,找到OutBound Request,勾选 ...

  5. android 组合方式自定义控件

    实现了<android 群英传>的TopBar的小实例.效果图如下: 记录下来,方便下次查看.主要的原理是将2个Button和一个TextView组合在一个RelativeLayout之中 ...

  6. OCR技术浅探（转）

    网址:https://spaces.ac.cn/archives/3785 OCR技术浅探 作为OCR系统的第一步,特征提取是希望找出图像中候选的文字区域特征,以便我们在第二步进行文字定位和第三步进行 ...

  7. NFS 网络文件系统制作

    1. 构建根文件系统主要是建立相关的文件目录,以及各目录下相关的配置文件.管理工具等. 2. 首先创建文件目录. mkdir rootfs cd rootfs mkdir bin dev etc li ...

  8. k8s 创建deployment流程

    pod 创建流程https://blog.csdn.net/yan234280533/article/details/72567261 api server -> etcd -> cont ...

  9. Camstar :新加的modeling对象没有在 modeling的下拉框中显示

    解决: 对象的maint 的 advance option client ui 要打上勾.

  10. centos7.4上安装python3环境的坑

    前言:为了将爬虫项目布置到服务器上,才有了今天这一下午的坑,必须记录 不要动现有的python2环境!不要动现有的python2环境!不要动现有的python2环境! 解压 tar -xvf Pyth ...