有些时候我们已经在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. Hibernate 再接触 继承映射

    用一张 每一个类一张表 建立外键 第一种 一张总表 Person package com.bjsxt.hibernate; import javax.persistence.Discriminator ...

  2. mysql 远程 ip访问

    默认情况下Linux内的mysql数据库mysql,user表内的用户权限只是对localhost即本机才能登陆.需要更改权限: 如下的方式确认: root#mysql -h localhost-u  ...

  3. hive 排序 分组计数后排序 几种不同函数的效果

    [转至:http://blackproof.iteye.com/blog/2164260] 总结: 三个分析函数都是按照col1分组内从1开始排序 (假设4个数,第2和第3个数据相同)    row_ ...

  4. RabbitMQ的安装与管理控制台设置

    首先下载安装Erlang环境:http://www.erlang.org/downloads: 再下载安装RabbitMQ:http://www.rabbitmq.com/download.html: ...

  5. js正则表达式子校验

    //正则表达式校验new RegExp(/^[1-9]\d{4,8}$/,"g").test(1234);//执行一个字符串所表达的方法 eval(this['字符串']) 正则表 ...

  6. div下面多个a标签的点击事件，并且获取a的属性

    $('.fensiselect').on('click','a',function(){ var id= $(this).attr('fanid'); alert(id) })

  7. 兴趣点 / 关键点（ Interest point/Keypoint ）

    • 不同视角图片之间的映射           • 稳定局部特征点           • 可重复性.显著性           • 抗图片变换           • 外貌变换(亮度.光照)    ...

  8. 抖音爆火的随机点名Java实现原理，没有连接数据库

    抖音爆火的随机点名Java实现原理,没有连接数据库 import java.util.Random; public class Array{ public static void main(Strin ...

  9. flex-grow

    [flex-grow] 指定宽度所占比,如一个flex中有三个item,这三个item的flex-grow均为1,则每个item占比为33.33%,如果一个是1,两个为2,则占比为20%,40%,40 ...

  10. cdnbest的站点日志保存时间怎么设置

    站点的保存时间是以节点全局里的保存时间为准 站点的日志保存大小还不能设置