有些时候我们已经在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. English Phrases with THE – Linking the TH Sound

    English Phrases with THE – Linking the TH Sound Share Tweet Share Tagged With: The Word THE Study En ...

  2. mac使用brew安装sshpass

    brew安装sshpass brew install https://raw.githubusercontent.com/kadwanev/bigboybrew/master/Library/Form ...

  3. 记Dagger2使用过程中的一个BUG--compileGoogleDebugJavaWithJavac

    项目编译可以通过,不过没有生成Dagger2的类,导致无法运行项目.. 错误提示 Error:(14, 41) 错误: 找不到符号 符号: 类 DaggerAppComponent 位置: 程序包 c ...

  4. Kubernetes+Prometheus+Grafana部署笔记

    一.基础概念 1.1 基础概念 Kubernetes(通常写成“k8s”)Kubernetes是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可 ...

  5. ceph部署手册

    CentOS7.2部署Luminous版Ceph-12.2.0 在CentOS7.2上安装部署Luminous版Ceph-12.2.0.由于ceph的Luminous版本默认使用bluestore作为 ...

  6. linux软连接（转）

    这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件或目录在另外一个位置建立一个同步的链接,类似Windows下的超级链接. 这个命令最常用的参数是-s,具体用法是:sudo l ...

  7. Java happen-before

    下面是happens-before原则规则: 程序次序规则:一个线程内,按照代码顺序,书写在前面的操作先行发生于书写在后面的操作: 锁定规则:一个unLock操作先行发生于后面对同一个锁额lock操作 ...

  8. spring 代理注解 <aop:aspectj-autoproxy />

    spring默认使用jdk的代理方式,使用jdk的代理方式我们知道,代理的类需要实现一个接口,若果没有就会报,java.lang.NoSuchMethodException: com.sun.prox ...

  9. CSSの変数を使う

    この文章はhttps://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variablesを参考します. これは実験段階の機能です.この機能は複数のブ ...

  10. 字符串相似度算法(编辑距离Levenshtein Distance)的应用场景

    应用场景 DNA分析: 将DNA的一级序列如β-球蛋白基因的第一个外显子(Exon)转化为分子“结构图”,然后由所得“结构图”提取图的不变量,如分子连接性指数．以图的不变量作为自变量,再由相似度计算公 ...